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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了支付宝小程序Swiper 滚动图 带圆点和跳转方式相关的知识,希望对你有一定的参考价值。

参考技术A ```

<!-- 滚动图 -->

<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:flex;width: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 滚动图 带圆点和跳转方式的主要内容,如果未能解决你的问题,请参考以下文章

支付宝小程序如何跳转到淘宝h5页面

支付宝小程序跳转第三方H5页面

swiper手滑导航圆点不同步

swiper手滑导航圆点不同步

小程序Swiper做Tab切换,带tab切换动画

记录一下支付宝小程序的坑