支付宝小程序Swiper 滚动图 带圆点和跳转方式

<!-- 滚动图 -->

<view class="swiper" style="position:relative">

<swiper autoplay="{{true}}" circular="{{true}}" onChange="currentHandle">

        <block a:for="{{swiperList}}">

          <swiper-item class="swiper-box">

            <view class="swiper-item" style="width:100%height:300rpx">

                <!-- lazy-load根据需要 onTap可以点击图片跳转 data-url绑定到跳转的链接-->

              <image lazy-load="{{true}}" mode="scaleToFill" src="{{item.image}}" style="display:flexwidth:100%height:300rpx"

                onTap="swiper" data-url="{{item.url}}" data-index='{{index}}' />

            </view>

          </swiper-item>

        </block>

      </swiper>

    <!-- 圆点 -->

      <view class="swiper_dot">

        <view class="trans MR10 {{current === index ?'active': ''}}" a:for="{{swiperList}}" a:key="{{index}}"></view>

      </view>

</view>

```

```

data(){

    swiperList:[

        {

            image:'',//图片的路径

            url:""//要跳转的路径

        },

                {

            image:'',

            url:""

        }

    ],

    current: 0,//初始化dot

},

//监听current

currentHandle(e) {

console.log(e)

    //改变current的值

    let { current } = e.detail

    this.setData({

      current

    })

},

```

```

.swiper-box {

  padding: 0 30rpx

}

.swiper-item {

  border-radius: 10rpx

  overflow: hidden

}

.swiper_dot {

  display: flex

  flex: 1

  justify-content: center

  position: absolute

  bottom: 16rpx

  left: 42%//通过绝对定位 在滚动图的正下方 具体看自己

}

.MR10 {

  margin-right: 10rpx

}

.trans {

  width: 23rpx

  height: 8rpx

  background-color: #ffffff70

  border-radius: 3.5rpx

  transition: width 0.5s linear

}

.active {

  background-color: #ffffffd7

  width: 67rpx

  transition: width 0.5s linear

}

```

---转自我的自个的

支付宝小程序Swiper 滚动图 带圆点和跳转方式_多甘范科夫斯基的博客-CSDN博客

<swiper id="swiper1" bindchange="intervalChange" current="{{mycurrent}}" style="height: {{clientHeight?clientHeight+'px':'auto'}}">

<!--软件著作权-->

<swiper-item class="slide-swiper">

<scroll-view scroll-y="{{true}}" style="height: {{clientHeight?clientHeight+'px':'auto'}}">

<!--撑出top高度-->

<view class="kong"></view>

<view class="classname" wx:for="{{arr}}" wx:key="" catchtap="oncopydels" data-jc="{{item.FRJ_RJQC}}">

<view class="title">{{item.FRJ_RJQC}}</view>

<view class="smalltitle" hidden="{{show}}">

<view class="jc">软件简称：</view>

<view class="jc">{{item.FRJ_RJJC}}</view>

</view>

<view class="smalltitle" hidden="{{shows}}">

<view class="jc">软件简称：</view>

<view class="jc">暂无信息</view>

</view>

<view class="smalltitle">

<view class="jc">登记号：</view>

<view class="jc">{{item.FRJ_DJH}}</view>

</view>

<view class="smalltitle">

<view class="jc">登记批准日期：</view>

<view class="jc">{{item.FRJ_IDT}}</view>

</view>

</view>

</scroll-view>

</swiper-item>

<!--./软件著作权-->

<!--作品著作权-->

<swiper-item class="slide-swiper">

<scroll-view scroll-y="{{true}}" style="height: {{clientHeight?clientHeight+'px':'auto'}}">

<!--撑出top高度-->

<view class="kong"></view>

<view class="classname" wx:for="{{proCopyRight}}" wx:key="proItem.FZD_ZPMC" wx:for-item="proItem" data-name="{{proItem.FZD_ZPMC}}" catchtap="proCopyRightTap">

<view class="title">{{proItem.FZD_ZPMC}}</view>

<view class="smalltitle">

<view class="jc">类型：</view>

<view class="jc">{{proItem.FZD_ZPLB}}</view>

</view>

<view class="smalltitle">

<view class="jc">登记号：</view>

<view class="jc">{{proItem.FZD_DJH}}</view>

</view>

<view class="smalltitle">

<view class="jc">登记日期：</view>

<view class="jc">{{proItem.FZD_DJDATE}}</view>

</view>

<view class="smalltitle">

<view class="jc">完成日期：</view>

<view class="jc">{{proItem.FZD_CZWCDATE}}</view>

</view>

<view class="smalltitle">

<view class="jc">首次发表日期：</view>

<view class="jc">{{proItem.FZD_FBDATE}}</view>

</view>

</view>

</scroll-view>

</swiper-item>

<!--./作品著作权--></swiper>123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566

js

wx.getSystemInfo({      success: function (res) {

that.setData({

clientHeight: res.windowHeight

})     }

})1234567

说明： 

swiper组件包含scroll-view 

是这次的纠结点