微信小程序-最近动态滚动实现

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;
}