小程序 -多行滚动

场景：几条信息的自动滑动效果，利用scroll-view
html:

//这里scroll-view的高度是定值，就是你要显示的区域的高度，需要精确，否则会出事，如果怕出事，在外边包一层，保险
<view class='indexList'>
  <scroll-view scroll-y="true" style='height:100%;overflow-y:hidden;' scroll-with-animation="true" scroll-into-view="{{toView}}"  bindscroll='bindscroll'>
    <view class='{{item?"indexList-list":"indexList-nolist"}}' wx:for='{{dataList}}'  wx:key='index' id='top{{index}}'>
      <text data-item='{{item}}' >{{item}}</text>
    </view>
  </scroll-view>
</view>

css:

.indexList {
  width: 100%;
  text-align: center;
  height: 342rpx;
}
.indexList-list {
 padding-top: 40rpx;
  width: 100%;
}
.indexList-nolist>text{
  padding: 0;
  margin: 0;
}
.indexList-list>text {
  padding: 20rpx 40rpx;
  height: 34rpx;
  font-size: 24rpx;
  color: #666;
  line-height: 34rpx;
  background: linear-gradient(180deg, rgba(69, 195, 255, 0.098) 0%, rgba(33, 144, 255, 0.098) 100%);
  border-radius: 23px;
  display: inline-block;
}

js:

page: function(msgList) {
    let i = 3;  //注意这里的i和下边那个全局的i是不一样的
    let _this = this;
    let timer = setInterval(function() {
      _this.data.dataList.push(msgList[i]);
      i++;
      _this.setData({
        dataList: _this.data.dataList,
        toView: "top" + Number(i - 1)  //控制scroll-view滚动
      })
      if (i == msgList.length + 1) {
        _this.setData({
          dataList: msgList.slice(0, 3),
          i: 0
        })
        i = 3;
      }
    }, 5000)
    this.setData({
      timer: timer
    })
  },
//监听scroll-view的滑动，如果向上滑动了，把当前页面内滑动到上层的数据清空，这样手动滑动scroll-view时就不会发生滚动事件了
  bindscroll: function(e) {
    let _this = this;
    if (e.detail.scrollTop) {
      _this.data.dataList[_this.data.i] = '';
      _this.data.i++ ; //这里i是全局变量，初始值为零，为了让它随着数组的移动删除最上边的东西
        this.setData({
          dataList: _this.data.dataList,  //刷新页面上的数组，这里的效果就是['','','','','111','222','333'],为空的就会不显示，就假装这里空的就被删掉了
          i: _this.data.i
        })
    }
  },

其中，msgList是一个要滚动的数据列表，dataList是要在页面上显示的列表，由于我这里页面上就三条数据，我的dataList一开始就是一个长度为三的数组（如果一条数据都没有，会渐渐加到三条然后再开始滚动），调用的时候直接this.page(msgList)就可以了

在网上找的都是一行滑动的，不满足项目需求，临时想的这个方法，挺麻烦的，可能是我钻了必须用scroll-view的牛角尖，等待找到更简便的方法实现这个效果

最后编辑于：2018.10.31 21:49:58