1.界面
2.代码实现
page/test/test.wxml
<view class="latest-box" wx:if="{{latestData.length>0}}">
<view class="cate-name">最近动态</view>
<view class="slide-box">
<swiper class="swiper" autoplay="true" interval="2000" duration="500" circular="true" vertical="true">
<block wx:for="{{latestData}}" wx:for-index="idx1" wx:key="idx1">
<swiper-item class="swiper-item">
<view class="title">{{item.province}} {{item.addressee}} 刚刚下了一笔订单</view>
</swiper-item>
</block>
</swiper>
</view>
</view>
page/test/test.js
Page({
/**
* 页面的初始数据
*/
data: {
latestData: [
{ "province": "湖南省", "addressee": "张**" },
{ "province": "广西省", "addressee": "李**" }
], //今日动态
}
})
page/test/test.wxss
.latest-box {
width: calc(100% - 56rpx);
height: 68rpx;
line-height: 88rpx;
margin: 0 auto;
position: relative;
}
.latest-box .cate-name {
width: 200rpx;
height: 68rpx;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
z-index: 1;
font-size: 30rpx;
font-weight: 650;
}
.latest-box .slide-box {
width: 100%;
height: 68rpx;
overflow: hidden;
}
.latest-box .swiper {
height: 68rpx;
}
.latest-box .title {
width: 100%;
height: 68rpx;
font-size: 24rpx;
text-align: right;
}