위 챗 애플 릿 은 간단 한 문자 주마등 을 실현 한다.

본 논문 의 사례 는 여러분 에 게 위 챗 애플 릿 이 문자 주마등 을 실현 하 는 구체 적 인 코드 를 공유 하 였 으 며,구체 적 인 내용 은 다음 과 같 습 니 다.
효과

WXML

<scroll-view class="container">
 <view class="scrolltxt">
 <view class="marquee_box">
 <view class="marquee_text" style="transform: translateX(-{{marqueeDistance}}px)">
 <text>{{text}}</text>
 <text style="margin-right:{{marquee_margin}}px;"></text>
 <text style="margin-right:{{marquee_margin}}px;">{{text}}</text> 
 </view>
 </view>
 </view>
</scroll-view>

WXSS

.container {display: flex;flex-direction: column;justify-content: space-between;box-sizing: border-box;}
.scrolltxt{padding:0 20rpx;background:#f8f8f8;}
.marquee_box {position:relative;color:#333;height:90rpx;display:block;overflow:hidden;} 
.marquee_text {white-space: nowrap;position:absolute;top:0;font-size:14px;height:90rpx;line-height:90rpx;}

JS

 data: {
 //    
 text: "    ：            ，                  ，      。",
 marqueePace: 1,//    
 marqueeDistance: 0,//      
 marquee_margin: 30,//  
 size: 14,//  
 time: '',//    
 },

onHide: function () {
 //         ，                  
 clearInterval(this.data.time);
 },

 onShow: function (e) {
 var that = this;
 var length = that.data.text.length * that.data.size;//    
 var windowWidth = wx.getSystemInfoSync().windowWidth;//     
 //console.log(length,windowWidth);
 that.setData({
 length: length,
 windowWidth: windowWidth
 });
 that.scrolltxt();//               
 },

 /**
 *     
 */
 scrolltxt: function () {
 var that = this;
 var length = that.data.length;//       
 var windowWidth = that.data.windowWidth;//    
 var time = this.data.time
 if (length > windowWidth) {
 time = setInterval(function () {
 var maxscrollwidth = length + that.data.marquee_margin;//       ，    +  ，                     marquee_margin   windowWidth  
 var crentleft = that.data.marqueeDistance;
 if (crentleft < maxscrollwidth) {//           
  that.setData({
  marqueeDistance: crentleft + that.data.marqueePace
  })
 }
 else {
  that.setData({
  marqueeDistance: 0 //       
  });
  clearInterval(time);
  that.scrolltxt();
 }
 }, 20);
 }
 else {
 that.setData({ marquee_margin: "1000" });//              ，      
 }
 that.setData({
 time:time
 })
 },

현재 관심 도가 높 은 위 챗 애플 릿 튜 토리 얼 을 추천 합 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.