小程序跑马灯功能

1.wxml

  <view class='index-swiper'>
    <image src="../../images/activity/notice_icon_default@2x.png" class='index-swiper-icon'></image>
    <swiper autoplay="true"  circular="true" class='index-swiper-content'>
      <block wx:for="{{notice}}" wx:key="index">
        <swiper-item class="index-swiper-content-term">
          <text>{{item.notice}}</text>
        </swiper-item>
      </block>
    </swiper>
  </view>
  

2.wxss

.index-swiper {
    position: relative;
    margin: 20rpx 0 18rpx 0;
    background-color: white;
    width:702rpx;
    height: 88rpx;
    margin-left:24rpx;
    border-radius: 8rpx;
}
.index-swiper::after {
  content:' ';
  position: absolute;
  top:0;
  bottom: 0;
  left:0;
  right:0;

} 

.index-swiper-icon {
    position: absolute;
    top:22rpx;
    left: 40rpx;
    width: 48rpx;
    height: 48rpx;
}

.index-swiper-content {
    margin-left: 128rpx;
    font-size: 26rpx;
    height: 70rpx;
    line-height: 70rpx;
}
.index-swiper-content-term{
  margin-top:9rpx; 
}
.index-swiper-content-term>text:first-of-type {
    padding: 4rpx 12rpx;
    margin-right: 18rpx;
    color: #333;   
}

3.js

import merchantModel from "../../models/merchant.js"
let app = getApp()
 onShow() {
  merchantModel.notice({ merid: app.globalData.merid }).then(res => {
      if (res.result == 1 && res.data) {
        this.setData({
          notice: res.data,
        });
      }

    });
 },