微信小程序自定义轮播图

效果图

index.wxml

 <!-- 轮播图 开始 --><view class='index_top'><view class='swiper_box'><swiper class='swipers' circular="true" autoplay="true" current="{{currentSwiper}}" bindchange="swiperChange"><block wx:for="{{advimg}}" wx:key="index"><swiper-item><!-- <image webp class="swiper_image" src="{{item.url}}" lazy-load="true" /> --><image webp class="swiper_image" src="http://m.qpic.cn/psc?/V50Ejiq52ki2kb0slvNb49Rw423ZwJd9/ruAMsa53pVQWN7FLK88i5rD9SVYLZYJgvO3mER3JpbfjfWPcsEczP*qNicQqqW4f2rmOfjOTG26TU4pPVxXSY.WS2.CU67W7w*m1EI4UKak!/b&bo=zgHpAAAAAAADFxQ!&rf=viewer_4" lazy-load="true" /></swiper-item></block></swiper><view class="dots"><block wx:for="{{advimg}}" wx:key="index"><view class="dot{{index == currentSwiper ? ' active' : ''}}"></view></block></view></view></view><!-- 轮播图 结束-->

index.wxss

// 轮播图 开始
.swiper_box {height: auto;position: relative;
}.swipers {// height: 280rpx;height: 380rpx;
}.swiper_box image {width: 100%;height: 100%;// border-radius: 100% 100% 100% 100% /0% 0% 30% 30%;
}/*用来包裹所有的小圆点  */.dots {// width: 210rpx;height: 20rpx;display: flex;flex-direction: row;position: absolute;left: 50%;transform: translateX(-50%);bottom: 5rpx;
}/*未选中时的小圆点样式 */.dot {width: 20rpx;height: 4rpx;border-radius: 14rpx;margin-right: 26rpx;background-color: #000000;
}/*选中以后的小圆点样式  */.active {width: 20rpx;height: 4rpx;background-color: #fff;
}//  轮播图 结束

index.js

  data: {advImage: [{url: 'https://www.mescroll.com/demo/res/img/pd1.jpg'},{url: 'https://www.mescroll.com/demo/res/img/pd2.jpg'},{url: 'https://www.mescroll.com/demo/res/img/pd3.jpg'},{url: 'https://www.mescroll.com/demo/res/img/pd3.jpg'},{url: 'https://www.mescroll.com/demo/res/img/pd3.jpg'},{url: 'https://www.mescroll.com/demo/res/img/pd3.jpg'},],currentSwiper: 0,indicatorColor: 'white',indicatorActivecolor: 'red'},/*** 生命周期函数--监听页面加载*/onLoad(options) {console.log(this.data.goods);this.setData({advimg: this.data.advImage,})},// 小圆点却换事件swiperChange: function (e) {this.setData({currentSwiper: e.detail.current})},

微信小程序自定义轮播图相关推荐

【自定义轮播图】微信小程序自定义轮播图无缝滚动
先试试效果,可以通过设置参数调整样式微信小程序中的轮播图可以直接使用swiper组件,如下: <swiper indicator-dots="{{indicatorDots}}&qu ...
微信小程序自定义轮播图滚动样式自定义组件轮播图的实现
效果图: 实现代码: wxml <view class="card card_b"><swiper autoplay="{{true}}" i ...
微信小程序 — 自定义轮播图的面板指示点样式
swiper默认指示板样式是小圆点.实现如图效果 (选中的椭圆样式,宽一点) 实现方式:修改swiper的css样式. /* 圆点的样式因为大小不一样.所以按钮设置大小之后,背景色记得设置完全透明* ...
微信小程序---swiper轮播图组件
微信小程序-swiper轮播图组件在components中新建文件夹swiper components/swiper/swiper.wxml <!--components/swiper/swi ...
微信小程序实现轮播图（超简单）
Tips:微信小程序可以在HbuilderX用HTML标签(如Ddiv.span等)写前端代码,也可以用微信小程序语法写(view.swiper标签),然后npm run dev编译后,在微信开发者工 ...
php轮播怎么调整图片大小,微信小程序内轮播图怎样设置成自适应高度
这次给大家带来微信小程序内轮播图怎样设置成自适应高度,微信小程序内轮播图怎设置成自适应高度的注意事项有哪些,下面就是实战案例,一起来看一下. 我的思路是:获取屏幕宽度,获取图片的宽高,然后等比设置当前 ...
微信小程序swiper图片尺寸_微信小程序 swiper 轮播图高度自适应
微信小程序 swiper 轮播图高度自适应发布时间:2018-07-20 15:34, 浏览次数:588 , 标签: swiper 小程序中使用swiper 组件 ,实现轮播图高度自适应效果. 先 ...
微信小程序之轮播图swiper组件自定义指示点样式
微信小程序 - swiper组件定义一个轮播图 swiper 组件: // swiper.wxml <swiper indicator-dots="true">< ...
小程序轮播图_微信小程序层叠轮播图
效果展示 Demo代码 wxml <view class="selection_cards" bindtouchstart="touchstart" bi ...

微信小程序自定义轮播图

效果图

微信小程序自定义轮播图相关推荐

最新文章

热门文章