首先，效果图：

水平滚动条的实现：网上的几种方案或多或少都存在一些问题：1.setData timer更新了文本视图的左边距方法，由于setData的毫秒级延迟，动画一次播放一张卡片；2.纯CSS实现，关键帧等。无法实现循环播放的设置；3.使用string.length*font-size的方法获取字符串的像素长度不够准确，重复循环播放后误差会不断积累和增大。我用的动画方法，实测动画流畅，循环播放没有错误。

水平滚动代码如下

//wxmlview class=' note ' view class=' left ' text class=' icon font icon-labagongao voice '/text view class=' left-box ' view class=' left-text '/view class=' content-box ' view class=' content-text ' animation=' { { animationData } } ' text id=' text ' { text } }/text/view/view view class=' right-text '/view/view class=' right ' bind tap=' goApp '！-image class=' app ' mode=' aspectFit ' src=' http :/assets/images/app。png ' style=' width : { { width rpx } } rpx ' bind load=' imageLoad '/image-text class=' more '更多应用/text/view/view//wxss。请注意{ display : flexalign-content:居中；正义-内容：空格；padding: 10rpx 25rpx背景# f1f1f1}。左{ display : flex align-items :居中；}.voice { margin-right : 5rpx；页边距-顶部： 2r pxcolor: # fa6016}。左框{位置：相对；display : flex align-items :居中；}.左文本{ position : absolute eleft : 0；宽度： 40 rpx高度： 100%;背景：线性梯度（向左，rgba(241，241，241，0)，rgba(241，241，241，1))；z指数： 99；}.右文本{ position : absolute right :-1rpx；宽度： 40 rpx高度： 100%;背景：线性梯度（向左，rgba(241，241，241，1)，rgba(241，241，241，0))；z指数： 99；}.内容框{ overflow:隐藏；宽度： 350 rpx}.内容-文本{ color : # 5e5e 5 white-space : nowrap；font-size : 28 rpx}.右{ display : flex align-items :居中；}.app { height: 48rpx}。more { margin-left : 5rpx；color : # AAA font-size : 32 rpx；}//js data : { text : ' 1 .]评分标准】页可以查看不同年龄段的评分标准，通过首页选择对应的性别、类别和年龄。2.【单项成绩】页包含了详细的单项打分情况及成绩雷达图，直观地看出自己的弱项和强项，animation: null，timer: null，duration: 0，textWidth: 0，wrappwidth : 0 { 0 }，onShow(){ this。initanimation(这。数据。text)}，onHide(){ this。destroyTimer()这个。setdata({ timer : null })}，onUnload(){ this。destroyTimer()这个。setdata({ timer : null })}，destroyTimer() { if (this} }，/** *开启公告字幕滚动动画* @param {String}文本公告内容* @ return {[type]} */init animation(text){让那个=这个。数据。持续时间=15000这。数据。动画=wx。创建动画({持续时间：这。数据。持续时间，定时功能： '线性' })让query=wx。createselectorquery()查询。选择(' .内容框')。boundingClientRect()。查询。选择(' # text ').boundingClientRect()。查询。exec((rect)={ that。setdata({ wrappwidth : rect[0]).宽度，文本宽度：矩形[1]。width }，()={ this.startAnimation() }) }，//定时器动画开始动画(){//重置//这个。数据。动画。选项。过渡。duration=0 const resetanation=this。数据。动画。translatex(这个。数据。wrappwidth ).step({ duration : { 0 })这。setdata({ animationData: resetanation。export()})//this。数据。动画。选项。过渡。持续时间=这个。数据。duration const animation data=this。数据。动画。translatex(-this。数据。文本宽度).step({ duration : this。数据。duration })setTimeout(()={ this。setdata({ animation data : animation data。export()})}，100)const timer=setTimeout(()={ this。startanimation()}，这。数据。持续时间)这个。setdata({ timer })}，sipwer滚动方式代码如下所示

捣蛋鬼默认为横向滚动垂直的为没错，则纵向滚动

//wxml！-公告- text class='swiper-notice '公告：/text swiper class=' swiper-container ' autoplay=' true ' vertical=' true ' circular=' true ' interval=' 2000 ' block wx : for=' { { msgList } } ' navigator URL='/page/notice/notice？title={ { item。URL } } ' open-type=' navive ' swiper-item view class=' swiper-item ' { item。title } }/view/swiper-item/navigator/block/swiper！-公告end - //wxss/*公告开始*/。swiper-note { font-size : 28 rpx；color: # fa6016}。swiper-container { margin-left : 10 rpx；宽度： 400 rpx高度： 100%;}.swiper-item { position :绝对值；前：名50%；transform : translateY(-50%)；宽度： 100%;font-size : 28 rpx飞越：隐藏；文本-飞越：省略号；空白： nowrap字母-间距： 2r px}/* 公告end */以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。