微信小程序实现swiper不定长数据滚动

1.实现效果

swiper.gif

2.实现原理

1.纵向滚动

在这里插入图片描述

2.同时显示的数量，实现不定长

在这里插入图片描述
注意点：
数据少于display-multiple-items设置的数，就会出现不显示数据情况。
假设，现在需要同时展示三条数据：
list数组长度大于2，display-multiple-items就等于3；如果数组长度不大于2，display-multiple-items就等于数组的长度。

d_num:len>2?3:len

3.实现代码

<!--pages/wxCase/newsSwiper/index.wxml-->
<!-- 展示一条数据 -->
<view class="mb20">
  <view class="tip">展示一条数据</view>
  <view class="flex-row s_box">
    <image src="../img/tixing.png" class="tx"></image>
    <swiper class="new_swiper" vertical="true" autoplay="true" circular="true" interval="4000" duration="1500" display-multiple-items='1' easing-function="easeInOutCubic">
      <block wx:for-index="idx" wx:for='{{5}}' wx:key="index">
        <swiper-item>
          <view class="sw_text text_ellipsis">这是一条消息提示消息提示~</view>
        </swiper-item>
      </block>
    </swiper>
    <image src="../img/left_arr.png" class="left_arr"></image>
  </view>
</view>
<!-- 展示两条数据 -->
<view class="mb20">
  <view class="tip">展示两条数据</view>
  <view class="draw_bot">
    <view class="flex-row j_c">
      <view class="line"></view>
      <view class="bot_title flex-column">展示两条数据</view>
      <view class="line">
      </view>
    </view>
    <swiper class="bot_swiper" vertical="true" autoplay="{{true}}" circular="true" interval="3000" display-multiple-items='2'>
      <block wx:for-index="idx" wx:for='{{3}}' wx:key="index">
        <swiper-item>
          <view class="flex" style="align-items: baseline;">
            <text decode="{{true}}">2021-11-25 &nbsp;&nbsp;&nbsp;17:38</text>
            <text decode="{{true}}" class="bot_text text_ellipsis">&nbsp;&nbsp;123</text>
          </view>
        </swiper-item>
      </block>
    </swiper>
  </view>
</view>

<!--数据少于display-multiple-items设置的数，就会出现不显示数据情况， 展示不定长数据，当总的数据长度大于2时，展示3条，反之展示数组的长度 -->
<view class="mb20">
  <view class="tip">展示3条数据</view>
  <view class="mb20" style="color: red;font-size:25rpx;">数据少于display-multiple-items设置的数，就会出现不显示数据情况， 展示不定长数据，当总的数据长度大于2时，展示3条，反之展示数组的长度</view>
  <view class="draw_bot">
    <view class="flex-row j_c">
      <view class="line"></view>
      <view class="bot_title flex-column">展示不定长数据</view>
      <view class="line">
      </view>
    </view>
    <swiper class="bot_swiper" vertical="true" autoplay="{{true}}" circular="true" interval="3000" display-multiple-items='{{d_num}}'>
      <block wx:for-index="idx" wx:for='{{data_list}}' wx:key="index">
        <swiper-item>
          <view class="flex" style="align-items: baseline;">
            <text decode="{{true}}">2021-11-25 &nbsp;&nbsp;&nbsp;17:38</text>
            <text decode="{{true}}" class="bot_text text_ellipsis">&nbsp;&nbsp;123</text>
          </view>
        </swiper-item>
      </block>
    </swiper>
  </view>
</view>

/* pages/wxCase/newsSwiper/index.wxss */
page {
  background-color: #dff0ee;
  padding: 20rpx;
}

.tip {
  margin-bottom: 20rpx;
  font-size: 25rpx;
  color: #333;
  font-weight: bold;
}

.mb20 {
  margin-bottom: 20rpx;
}

.new_swiper {
  flex: 1;
  height: 66rpx;
}

.s_box {
  height: 66rpx;
  line-height: 66rpx;
  background: rgb(20, 122, 190, 0.15);
  padding: 0 24rpx;
}


.tx {
  width: 34rpx;
  height: 28rpx;
  padding-right: 16rpx;
  flex-shrink: 0;
}

.left_arr {
  width: 12rpx;
  height: 22rpx;
  flex-shrink: 0;
}

.sw_text {
  font-size: 26rpx;
  font-weight: 500;
  color: #147ABF;
}


.draw_bot {
  width: 704rpx;
  height: 300rpx;
  box-shadow: 0px 0px 73rpx 0px #FFFFFF inset;
  border-radius: 30rpx;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 43rpx 0;
}

.bot_title {
  font-size: 36rpx;
  font-weight: bold;
  color: #014493;
  margin: 0 22rpx;
}

.line {
  width: 138rpx;
  height: 1rpx;
  background: #014493;
  position: relative;
}

.line::before {
  content: '';
  position: absolute;
  width: 49rpx;
  height: 1rpx;
  background: #014493;
  bottom: -7rpx;
}

.line:nth-child(1):before {
  right: 0;
}

.bot_swiper {
  width: 629rpx;
  height: 150rpx;
  font-size: 28rpx;
  color: #084A96;
  margin: 51rpx auto 0;
  overflow: hidden;
}

.bot_swiper view {
  overflow: hidden;
  width: 100%;
}

.bot_text {
  color: #EB360C;
}

// pages/wxCase/newsSwiper/index.js
Page({


  data: {
    data_list:[
      '测试数据一', '测试数据2', '测试数据3', '测试数据4', '测试数据5', '测试数据6',
    ],
    d_num:'',
  },

  
  onLoad: function (options) {
    let len=this.data.data_list.length;
    console.log(len)
    this.setData({
      d_num:len>2?3:len
    })
  },

  
  onShow: function () {

  },

  
})

4.更多小程序demo，关注苏苏的码云。