uni-app实现广告滚动条

uni-app实现广告滚动条

参数说明

• circular    Boolean    false    是否采用衔接滑动，即播放到末尾后重新回到开头
• vertical    Boolean    false    滑动方向是否为纵向
• previous-margin    String    0px    前边距，可用于露出前一项的一小部分，接受 px 和 rpx
• next-margin    String    0px    后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值
• autoplay    Boolean    false    是否自动切换
• disable-touch    Boolean    false    是否禁止用户 touch 操作
• interval    Number    5000    自动切换时间间隔
• duration    Number    500    滑动动画时长
• @change    EventHandle
• current 改变时会触发 change 事件，event.detail = {current: current, source: source}
• current    Number    0    当前所在滑块的 index

html

      <view class="scroll_box">
        <swiper class="swiper" circular="true" vertical="true" :previous-margin='50+"rpx"' :next-margin='50+"rpx"'
          :autoplay="true" disable-touch='false' :interval="3000" :duration="2000" @change='EventHandle'>
          <swiper-item v-for="(item,index) in list" :key="index">
            <view :class="current==index?'swiper-item':''  ">{{item}}</view>
          </swiper-item>
        </swiper>
      </view>

js

   data() {
      return {
        current: 0,
        list: [
          '刚刚 1657*****8768 收到佣金9.9999元',
 
          '刚刚 1657*****8768 收到佣金9.9999元',
 
          '刚刚 1657*****8768 收到佣金9.9999元',
 
          '刚刚 1657*****8768 收到佣金9.9999元',
 
          '刚刚 1657*****8768 收到佣金9.9999元',
 
          '刚刚 1657*****8768 收到佣金9.9999元',
        ],
      };
    },
 methods: {
      EventHandle(e) {
        this.current = e.target.current;
      },
}，

css

 .scroll_box {
    background: #FFFFFF;
    margin: 30rpx;
    border-radius: 10rpx;
 
    .swiper {
 
      height: 150rpx;
    }
 
    .swiper-item {
      background-color: #FECA71;
      font-size: 32rpx;
    }
  }