微信小程序实现无缝滚动

本文实例为大家分享了微信小程序实现无缝滚动的具体代码，供大家参考，具体内容如下

wXMl

view class="wrap-item" style='transform:translatex({
{
posLeft2}
}
    px)'>
      view class="messages-scroll FirstScroll">
   view class="{
{
index == 0?'yanse ITems':'items'}
}
" wx:for="{
{
zhuli}
}
    " wx:key="index">
   image wx:if="{
{
index == 0}
}
    " src="../../images/xiangq_yonhu_icon_p.png">
    /image>
   image wx:if="{
{
index != 0}
}
    " src="../../images/xiangq_yonhu_icon_n.png">
    /image>
       view>
{
{
index}
}
{
{
item.ip}
}
{
{
item.str}
}
    /view>
       /view>
      /view>
  view class="messages-scroll secondScroll" style='transform:translateX({
{
marginLeft}
}
    px)'>
   view class="{
{
index == 0?'yanse items':'items'}
}
" wx:for="{
{
zhuli}
}
    " wx:key="index">
   image wx:if="{
{
index == 0}
}
    " src="../../images/xiangq_yonhu_icon_p.png">
    /image>
   image wx:if="{
{
index != 0}
}
    " src="../../images/xiangq_yonhu_icon_n.png">
    /image>
       view>
{
{
item.ip}
}
{
{
item.str}
}
    /view>
       /view>
      /view>
    /view>
    

JS

onShow(){
    let windowWidth = wx.getSystemInfosync().windowWidth;
 //屏幕宽度wx.createSelectorQuery().select('.firstScroll').boundingClientRect(function (rect) {
      let txtLength = rect.width;
//文字+图标长度  console.LOG(txtLength)  console.log(rect)  // that.setData({
  // marginLeft: txtLength  windowWidth - that.data.marginLeft ? windowWidth - txtLength : that.data.marginLeft  // }
    )  console.log(that.data.marginLeft)  that.roll2(that, txtLength, windowWidth);
 //调用滚动方法 }
).exec()}
,roll2: function (that, txtLength, windowWidth) {
 VAR interval2 = setInterval(function () {
 if (-that.data.posLeft2  txtLength) {
 that.setData({
 posLeft2: that.data.posLeft2 - that.data.pace }
) }
 else {
 // 第二段文字滚动到左边后重新滚动 that.setData({
 posLeft2: 0 }
    ) clearInterval(interval2);
     that.roll2(that, txtLength, windowWidth);
 }
 }
, 20)}
    ,

wxss:

.wrap-item{
    position: relative;
    z-index: 10;
    display: flex;
    white-space: nowrap;
}
.brand-info .messages-scroll {
    display: flex;
    white-space: nowrap;
    margin-top: 148rpx;
}
.brand-info .messages-scroll .items {
    display: flex;
    white-space: nowrap;
    box-sizing: border-box;
    padding: 0 10rpx;
    margin-left: 10rpx;
    align-items: center;
    /* width: 332rpx;
     */height: 50rpx;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 25rpx;
    color: #99A4BA;
}
.yanse{
    color: #C4FFFD !important;
}
.brand-info .messages-scroll .items image {
    width: 26rpx;
    height: 22rpx;
    margin-right: 10rpx;
}
.brand-info .messages-scroll .items view {
    font-Size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
}
    

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

• 微信小程序实现简单计算器
• 微信小程序+mqtt,esp8266温湿度读取的实现方法
• 微信小程序自定义scroll-view的实例代码
• 微信小程序实现走马灯效果实例
• C语言实现扫雷小游戏的全过程记录
• java简易小游戏制作代码
• 用js实现拼图小游戏
• C#实现简单飞行棋小游戏
• Linux下C语言实现贪吃蛇小游戏
• 如何用CocosCreator制作微信小游戏

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！