WeChat Mini Program-Recent Dynamic Scrolling Implementation

1.Interface

2. Code implementation

page/test/test.wxml

Recent activity{{item.province}} {{item.addressee}} just placed an order

page/test/test.js

Page({/*** Initial data of the page*/data: {latestData: [{ "province": "Hunan Province", "addressee": "Zhang**" },{ "province": "Guangxi Province", "addressee": "Li**" }], //Today's dynamic}})

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