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 17:38</text>
<text decode="{{true}}" class="bot_text text_ellipsis"> 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 17:38</text>
<text decode="{{true}}" class="bot_text text_ellipsis"> 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 () {
},
})
