一、上下滚动效果 1、利用小程序组建swiper实现上下循环滚动（为了美观，wxss中我增加了高度和背景色）。 <swiper class='swiper-box' autoplay='{{true}}' interval='2000' vertical='{{true}}' circular='{{true}}'> <swiper-item class='item' wx:for='{{txtlist}}'>{{index + 1}}、{{item}}</swiper-item> </swiper> .swiper-box{ position: relative; height: 80rpx; line-height: 80rpx; padding: 0 40rpx; background-color: #FFEBCD; overflow: hidden; } .swiper-box .item{ white-space: nowrap; text-overflow: ellipsis; } Page({ data: { txtlist: [ '这是第一条公告内容', '小程序上下滚动效果总结', '这是一行上下滚动的文字，文字最好短点，超过一行省略' ] } }) 二、水平滚动效果1、是利用CSS3中keyframes实现的，效果是文字从屏幕右边开始向左滚动 2、文字从屏幕左边向左滚动，滚动完成后从屏幕右边开始再向左滚动，以此循环 3、文字展示两次，两段文字之间设置适当的间距，从右向左开始滚动，当第二条文字滚动到屏幕左边时设置重新滚动。 <view class='wp'> <!-- 纯css实现 --> <view class='box'> <view id='txt1' class='txt' style='animation: roll linear {{duration}}s infinite;'>{{text}}</view> </view> <!-- 显示完后再显示 --> <view class='box'> <view id='txt2' class='txt' style='left: {{posLeft1}}px'>{{text}}</view> </view> <!-- 出现空白后就显示 --> <view class='box'> <view class='flex-box' style='left: {{posLeft2}}px'> <view id='txt3' class='txt'>{{text}}</view> <view class='txt' style='margin-left: {{marginLeft}}px'>{{text}}</view> </view> </view> </view> .box{ position: relative; width: 100%; height: 80rpx; line-height: 80rpx; overflow: hidden; } .txt{ white-space: nowrap; } #txt1{ position: relative; white-space: nowrap; overflow: hidden; transition: left 1s linear; } #txt2,.flex-box{ position: absolute; top: 0; } .flex-box{ display: flex; flex-wrap: nowrap; justify-content: flex-start; } @keyframes roll { 0% {left: 750rpx;} 100% {left: -100%;} } let interval1,interval2; Page({ data: { text: '这是一行文字水平滚动效果，在小程序中实现的', //滚动文字 duration: 0, //水平滚动方法一中文字滚动总时间 pace: 1, //滚动速度 posLeft1: 0, //水平滚动方法二中left值 posLeft2: 0, //水平滚动方法三中left值 marginLeft: 60 //水平滚动方法三中两条文本之间的间距 }, roll1: function (that, txtLength, windowWidth) { interval1 = setInterval(function() { if (-that.data.posLeft1 < txtLength) { that.setData({ posLeft1: that.data.posLeft1 - that.data.pace }) } else { that.setData({ posLeft1: windowWidth }) } }, 20) }, roll2: function (that, txtLength, windowWidth) { interval2 = setInterval(function () { if (-that.data.posLeft2 < txtLength + that.data.marginLeft) { that.setData({ posLeft2: that.data.posLeft2 - that.data.pace }) } else { // 第二段文字滚动到左边后重新滚动 that.setData({ posLeft2: 0 }) clearInterval(interval2); that.roll2(that, txtLength, windowWidth); } }, 20) }, onShow: function () { let that = this; let windowWidth = wx.getSystemInfoSync().windowWidth; //屏幕宽度 wx.createSelectorQuery().select('#txt1').boundingClientRect(function (rect) { let duration = rect.width * 0.03;//滚动文字时间,滚动速度为0.03s/px that.setData({ duration: duration }) }).exec() wx.createSelectorQuery().select('#txt2').boundingClientRect(function (rect) { let txtLength = rect.width;//滚动文字长度 that.roll1(that, txtLength, windowWidth); }).exec() wx.createSelectorQuery().select('#txt3').boundingClientRect(function (rect) { let txtLength = rect.width;//文字+图标长度 that.setData({ marginLeft: txtLength < windowWidth - that.data.marginLeft ? windowWidth - txtLength : that.data.marginLeft }) that.roll2(that, txtLength, windowWidth); }).exec() }, onHide: function() { clearInterval(interval1); clearInterval(interval2); } })

腾讯客服： 腾讯客服电话：4006700700（服务时间09：00-22：00） 客服公众号：腾讯客服  Tencent_KF 微信小程序：腾讯客服 如果授权了第三方，比如说有赞平台，从设置-基本设置，找基本信息中“服务类目”，点击详情，旁边有个“联系客服”，可以找到最下面的“转人工”，人工接入后点击‘转监管’，接入监管客服反馈申诉问题 小程序申诉： 小程序控制台： 版本管理有个联系客服 > 点进去后发送‘转人工’，人工接入后点击‘转监管’，接入监管客服反馈申诉问题。 申诉的是小程序功能警告站内信，要通过小程序对应的功能封禁站内信进行申诉才可恢复对应的封禁功能 网站拦截申诉：https://urlsec.qq.com/complain.html 搜一搜投诉与反馈：https://wj.qq.com/s2/11422134/f23c/