微信小程序从右向左无限滚动组件封装(类似公告)

组件代码

wxml代码

js 复制代码
<view class="container">
    <view class="text-wrapper">
        <!-- 这两个都不能删除,用来放无限滚动的,第一个滚完第二个接上,第二个滚完第一个又接上了 -->
        <text class="scroll-text text1" style="left: {{-moveleft}}px;">{{ scrollText }}</text>
        <text class="scroll-text text2" style="left: {{ moveleft2}}px;">{{ scrollText }}</text>
    </view>
</view>

wxss代码

css 复制代码
.container {
    display: flex;
    width: 100vw;
}

.text-wrapper {
    display: flex;
    width: 100vw;
    height: 50rpx;
    overflow: hidden;
    position: relative;
    margin-right: 20rpx;
    margin-left: 20rpx;
}

.scroll-text {
    white-space: nowrap;
}

.text1 {
    position: absolute;
    white-space: pre;
    font-size: 26.37rpx;
    line-height: 28rpx;
    color: #FAEECC;
}

.text2 {
    position: absolute;
    white-space: pre;
    font-size: 26.37rpx;
    line-height: 28rpx;
    color: #FAEECC;
}

js代码

js 复制代码
Component({
    /**
     * 组件的属性列表
     */
    properties: {
      // 两文本的内容间隔
      interval_widgth: {
        type: Number,
        value: 10
      },
      scrollText:{
        type:String,
        value:'这里是需要无缝滚动的文本,用于检测滚动效果是否正常!'
      }
    },
   
    /**
     * 组件的初始数据
     */
    data: {
   
      moveleft:0,
      moveleft2:0,
      text_width:0,
      timer:null
    },
   
    /**
     * 组件的方法列表
     */
    methods: {
   
    },
    lifetimes: {
      attached() {
      },
      ready() {
        // 获取内容的宽度
        const query = wx.createSelectorQuery().in(this);
        query.select('.scroll-text').boundingClientRect().exec((res) => {
          this.setData({
            'text_width':res[0].width,
            moveleft2: res[0].width+this.data['interval_widgth']
          })
        });
      },
      detached(){
        clearInterval(this.data.timer);
      }
    },
    pageLifetimes: {
      show() {
        this.data.timer=setInterval(()=>{
          if(this.data.moveleft>=this.data.text_width+this.data.interval_widgth){
            this.setData({
              moveleft:-(this.data.interval_widgth+this.data.text_width)
            })
          };
          if(-(this.data.moveleft2)>=this.data.text_width+this.data.interval_widgth){
            this.setData({
              moveleft2:(this.data.interval_widgth+this.data.text_width)
            })
          };
          this.setData({
            moveleft:this.data.moveleft+2,
            moveleft2:this.data.moveleft2-2
          })
        },20)
       
      },
      hide(){
        clearInterval(this.data.timer);
      }
    }
  })

页面使用

在页面的json文件引入组件

json 复制代码
{
    "usingComponents": {
        "gundong": "../../components/gundong/gundong"
    }
}

使用

wxml 复制代码
<gundong></gundong>

这里也支持传值,如果封装的值或者样式不满足需求可以修改组件传入更多数据,不影响滚动功能即可

相关推荐
秋野酱8 小时前
基于javaweb的SpringBoot个人健康管理系统小程序微信小程序设计与实现(源码+文档+部署讲解)
spring boot·微信小程序·小程序·毕业设计
雯0609~8 小时前
微信小程序:修改提示信息placeholder颜色
微信小程序·小程序
爷傲奈我何!13 小时前
原生微信小程序实现导航漫游(Tour)
微信小程序·小程序
编程毕设13 小时前
【含文档+PPT+源码】基于微信小程序的社区便民防诈宣传系统设计与实现
微信小程序·小程序
donghuzi115 小时前
关于微信小程序端base64解码问题
微信小程序·小程序
男子峰17 小时前
京东Taro小程序原生端接入操作
ios·小程序·taro
爱因斯坦乐17 小时前
小程序配置
小程序
睡不着的可乐18 小时前
【自定义微信小程序拉下选择过滤组件】searchable-select
微信小程序
说私域19 小时前
共享经济再中介化进程中的技术创新与模式重构研究——以“开源AI智能名片链动2+1模式S2B2C商城小程序“为例
人工智能·微信·小程序·重构·开源·零售