Uni app realizes advertisement scroll bar

Parameter description

•  circular    Boolean    false     Whether to adopt the joint sliding , That is, play to the end and return to the beginning
•  vertical    Boolean    false     Whether the sliding direction is longitudinal
• previous-margin    String    0px     Front margin , Can be used to expose a small part of the previous item , Accept px and rpx 
• next-margin    String    0px     Back margin , Can be used to expose a small part of the latter , Accept px and rpx value
• autoplay    Boolean    false     Auto switch or not
• disable-touch    Boolean    false     Prohibit users touch operation
• interval    Number    5000     Auto switch interval
• duration    Number    500     The length of the slide animation
• @change    EventHandle    
• current It will trigger change event ,event.detail = {current: current, source: source}
• current    Number    0     The current slider 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: [
          ' just  1657*****8768  receive commission 9.9999 element ',

          ' just  1657*****8768  receive commission 9.9999 element ',

          ' just  1657*****8768  receive commission 9.9999 element ',

          ' just  1657*****8768  receive commission 9.9999 element ',

          ' just  1657*****8768  receive commission 9.9999 element ',

          ' just  1657*****8768  receive commission 9.9999 element ',
        ],
      };
    },
 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;
    }
  }