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