微信小程序无限滚动

1、wxml

 <view class="notice-container" style="height:{{totalHeight}}px" catchtap="onNewProduct">
  <view class="notice-title-container">
    <block wx:for="{{titleArray}}" wx:key="index" data-index="{{index}}">
      <view class="notice-line-title-item" style="background:{{item.background}};color:{{item.color}};width: {{item.width}};">
        {{item.value}}</view>
    </block>
  </view>
  <view class="notice-swiper" style="height:{{lineArray.length*38}}px">
    <view class="notice-position" style="top:-{{move}}px">
      <view class="notice-for" wx:for="{{lineArray}}" wx:key="index" data-index="{{index}}">
        <view class="notice-item-root-container">
          <view class="notice-item-container">
            <block wx:for="{{item}}" wx:key="index" data-index="{{index}}" wx:for-item="innerItem">
              <view class="notice-line-item-container" style="color:{{innerItem.color}};width: {{innerItem.width}};">
                <view class="notice-line-item">{{innerItem.value}}</view>
              </view>
            </block>
          </view>
          <view class="notice-item-divider"></view>
        </view>
      </view>
    </view>
  </view>
</view>

2、wxss 

.notice-container {
  /* display: flex;
	flex-direction: column; */
	margin-top: 30rpx;
  width: 702rpx;
  margin-left: 24rpx;
  background: #FFFFFF;
  border-radius: 16rpx;
  overflow: hidden;
}

.notice-title-container {
  width: 100%;
  height: 30px;
  display: flex;
  flex-direction: row;
}

.notice-line-title-item {
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 500;
  height: 60rpx;
  line-height: 60rpx;
  color: #FFFFFF;
  height: 100%;

  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  display: flex;
  flex-direction: row;
  justify-content: center;
  /* flex: 1; */
}

.notice-swiper {
  width: 100%;
  height: fit-content;
  float: left;
  overflow: hidden;
  position: relative;
}

.notice-position {
  width: 100%;
  float: left;
  position: absolute;
}

.notice-for {
  width: 100%;
  float: left;
  height: 38px;
}


.notice-item-root-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 38px;
}

.notice-item-container {
  width: 100%;
  height: 37px;
  display: flex;
  flex-direction: row;
}

.notice-item-divider {
  width: 640rpx;
  height: 1px;
  background: #f4f4f4;
  margin-left: 31rpx;
}
.notice-line-item-container {
  height: 100%;
  /* flex: 1; */
  display: flex;
  flex-direction: row;
  overflow: hidden;
  max-lines: 1;
  white-space: nowrap;
  justify-content: center;
}
.notice-line-item{
  margin-left: 6rpx;
  margin-right: 6rpx;
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
  width: fit-content;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 100%;
  overflow: hidden;
  line-height: 24rpx;
  max-lines: 1;
  white-space: nowrap;
}

3、js

let interval1
let interval2 

data: {
        serviceData: null,
        titleArray: [],
        move: 0,
        searchBottom: 0,
        tabHeight: 0,
        totalHeight: 0
    },


  onLoad: function (options) {
        var that = this;
        /**生成背景星星-开始 */
        var stars = 400;
        var r = 0;
        var stararray = [];
        for (var i = 0; i < stars; i++) {
            var s = 0.2 + Math.random() * 1;
            var curR = r + Math.random() * 300;
            var rotateY = Math.random() * 360;
            var rotateX = Math.random() * -50;
            stararray[i] = {
                curR: curR,
                rotateY: rotateY,
                rotateX: rotateX,
                s: s
            };
        }
        this.setData({
            stararray: stararray,
        })
        /**生成背景星星-结束 */
        let serviceData = {}
        serviceData.titlecolor = "#ffffff"
        serviceData.titleBackground = "#1E9FFF"
        let serviceArray = []
        let innerData1 = new Object()
        innerData1.color = "#999999"
        innerData1.title = "震源地"
        innerData1.width = "310rpx"
        // innerData1.value = ["列1行1dfaddddddfadfad", "列1、行2", "列1、行3"]
        let innerData2 = new Object()
        innerData2.width = "100rpx"
        innerData2.color = "#333333"
        innerData2.title = "震级"
        // innerData2.value = ["列2、行111111111111111111111", "列2、行2", "列2、行3", "列2、行4"]
        let innerData3 = new Object()
        innerData3.color = "#d61515"
        innerData3.title = "地震时间"
        innerData3.width = "300rpx"
        // innerData3.value = ["列3、行1", "列3、行2", "列3、行3", "列3、行4"]
        serviceArray.push(innerData1)
        serviceArray.push(innerData2)
        serviceArray.push(innerData3)
        serviceData.array = serviceArray
        //以上模拟服务端数据
        let lineArray = []
        let titleArray = []

        let count = serviceData.array[0].value.length
        let array = serviceData.array
        let itemColorArray = []
        array.forEach(e => {
            let itemData = {}
            itemData.value = e.title
            itemData.width = e.width
            itemData.color = serviceData.titlecolor
            itemData.background = serviceData.titleBackground
            titleArray.push(itemData)
            itemColorArray.push(e.color)
        })
        let colmnIndex = 0
        for (let i = 0; i < count; i++) {
            let itemArray = []
            array.forEach(e => {
                let itemData = {}
                itemData.value = e.value[i]
                itemData.width = e.width
                itemData.color = itemColorArray[colmnIndex]
                itemArray.push(itemData)
                colmnIndex++
            })
            colmnIndex = 0
            lineArray.push(itemArray)
        }
        this.setData({
            lineArray,
            titleArray,
        })
        if (lineArray.length > 7) {
            //当行数大于5的时候滚动轮播
            this.setData({
                totalHeight: 7 * 38
            })
            let that = this
            interval1 = setInterval(function () {
                that.setData({
                    move: that.data.move + 1,
                })
            }, 18)
            interval2 = setInterval(function () {
                let detail = []
                for (let i = 1; i < that.data.lineArray.length; i++) {
                    detail.push(that.data.lineArray[i])
                }
                detail.push(that.data.lineArray[0])
                that.setData({
                    lineArray: detail,
                    move: 0,
                })

            }, 684)
            //684/18 = 38(一行的高度)
        } else {
            this.setData({
                totalHeight: lineArray.length * 38 + 38
            })
        }
    },