小程序跑马灯

wxml

  

    

    

      

      bindscrolltolower="_changeSwiperIndex" scroll-x showScrollbar="{{false}}" paingEnabled style="color:{{color}};font-size: {{size}}rpx;height:{{height}}rpx;line-height:{{height}}rpx">{{item}}

    

    

  

  

  {{list[swiperIndex]}}

wxss

.marquee-swiper{

  height: 100%;

}

.text-item{

  box-sizing: border-box;

  padding:0 20rpx;

  white-space: nowrap;

}

.roule-box{

  position: fixed;

  top:-10000px;

  opacity: 0;

  z-index: -1000;

  white-space: nowrap;

  padding:0 20rpx;

}

js

// components/marquee.js

Component({

  /**

   * 组件的属性列表

   */

  properties: {

    list: {

      type: Array,

      value: []

    },

    speed: {

      type: Number,

      value: 5,

    },

    width: {

      type: Number,

      value: 690,

    },

    height: {

      type: Number,

      value: 50,

    },

    size: {

      type: Number,

      value: 24

    },

    color: {

      type: String,

      value: "#fff"

    },

    borderRaduis: {

      type: Boolean,

      value: true

    },

    bgColor: {

      type: String,

      value: ""

    }

  },

  /**

   * 组件的初始数据

   */

  data: {

    ratio: wx.getStorageSync('ratio'),

    swiperIndex: 0,

    scrollLeft: 0

  },

  /**

   * 组件的方法列表

   */

  methods: {

    onSwiperChange(e) {

      if (e.detail.source == 'touch') {

        this.setData({

          scrollLeft: 0,

          swiperIndex: e.detail.current,

        })

      }

    },

    //下一条

    _changeSwiperIndex() {

      clearInterval(this._timer)

      setTimeout(() => {

        this.setData({

          scrollLeft: 0

        })

        if (this.data.swiperIndex == this.data.list.length - 1) {

          this.setData({

            swiperIndex: 0

          })

        } else {

          this.setData({

            swiperIndex: this.data.swiperIndex + 1

          })

        }

        setTimeout(() => {

          this._scrolling()

        }, 1000)

      }, 1000)

    },

    //左右滚动

    _scrolling() {

      let that = this

      //创建节点选择器 获取文字在页面的宽度，如果大于容器宽度，开始滚动，否则等待两秒，切换下一条

      var query = this.createSelectorQuery();

      //选择class id

      query.select('.roule-box').boundingClientRect(function (rect) {

        if (rect.width > that.data.width * that.data.ratio) {

          that._timer = setInterval(() => {

            that.setData({

              scrollLeft: that.data.scrollLeft + 1

            })

          }, 33);

        } else {

          setTimeout(() => {

            that._changeSwiperIndex()

          }, 2000)

        }

      }).exec();

    },

  },

  lifetimes: {

    attached() {

      setTimeout(() => {

        this._scrolling()

      }, 1000)

    },

    detached(){

      clearInterval(this._timer)

    }

  }

})