微信小程序---swiper轮播图组件

微信小程序—swiper轮播图组件

在components中新建文件夹swiper

components/swiper/swiper.wxml

<!--components/swiper/swiper.wxml--><view class="container"><swiper class="swiper-box" bind:change="swiperChange" interval="4000" circular autoplay><block wx:for="{{swiperList}}" wx:key="index"><swiper-item><image class="targetImg" src="{{item}}" mode="aspectFill"></image></swiper-item></block></swiper><!--重置小圆点的样式  --><view class="dots"><view class="dotsBox" style='width:{{(swiperList.length*26+swiperList.length*10) + "rpx"}}'><!-- <view class="dotsBox" style='width:180rpx'> --><block wx:for="{{swiperList}}" wx:key="index"><text class="dot {{index == currentIndex ? 'dot-active' : ''}}"></text></block></view></view>
</view>

components/swiper/swiper.js

Component({properties: {swiperList: {type: Array,value: []// 默认数据（可以从引用组件处的属性传入该属性值）}},data: {currentIndex: 0  // 初始高亮下标},methods: {/* 这里实现控制自定义轮播指示点高亮 */swiperChange(e) {     this.setData({currentIndex: e.detail.current})      }}
})

components/swiper/swiper.wxss

/* components/swiper/swiper.wxss */
.container {position: relative;
}.swiper-box {width: 100%;height: 364rpx;
}.targetImg {width: 100%;height: 100%;
}/*小圆点  */
.dots {width: 100%;height: 4rpx;display: flex;position: absolute;bottom: 30rpx;
}.dotsBox {height: 4rpx;display: flex;margin: 0 auto;
}/*未选中时的小圆点样式 */
.dot {width: 26rpx;height: 4rpx;border-radius: 2rpx;margin-right: 10rpx;background-color: #ffffff;opacity: 0.4;
}/*选中以后的小圆点样式  */
.dot-active {opacity: 1;
}

在pages文件中引用

json文件中

{"usingComponents": {"w-swiper":"/components/swiper/swiper"}
}

html文件中

  <w-swiper swiperList="{{sprList}}" />

js文件中

data:{sprList:['/images/img.png','/images/img.png'],
}

微信小程序---swiper轮播图组件相关推荐

微信小程序swiper图片尺寸_微信小程序 swiper 轮播图高度自适应
微信小程序 swiper 轮播图高度自适应发布时间:2018-07-20 15:34, 浏览次数:588 , 标签: swiper 小程序中使用swiper 组件 ,实现轮播图高度自适应效果. 先 ...
微信小程序swiper轮播图抖动问题解决
问题:组件swiper(轮播图)真机上不自动滚动一直卡在那里抖动,后台运行几分钟,重新进入的时候也会抖动,问题复隐复现. 原代码: // 轮播图圆点 swiperChange: function ...
微信小程序—swiper轮播图图片不显示的解决方法
swiper轮播图图片不显示的解决方法遇到图片无法显示的问题,是样式问题在wxss里面新型修改设置宽度 .container{width: 750rpx; } .container swiper ...
微信小程序轮播中的current_微信小程序 swiper轮播图的按钮切换
一.前言 swiper组件自带autoplay切换,本文将会介绍如何用到左右按钮切换轮播图,以及如何解决快速点击按钮出现的bug. 核心属性 circular: 负责切换衔接的效果(否则最后一张与第一 ...
微信小程序 swiper轮播图高度宽度自适应（解决轮播图图片显示不全问题）
之前从来没有接触过前端,最近开始学习微信小程序,因为没有基础所以学起来有点难度.在学习这个swiper标签的时候遇到了一些问题.首先一个问题就是轮播图中的图片显示不全,尽管已经给image设置成了wi ...
微信小程序实现轮播图（超简单）
Tips:微信小程序可以在HbuilderX用HTML标签(如Ddiv.span等)写前端代码,也可以用微信小程序语法写(view.swiper标签),然后npm run dev编译后,在微信开发者工 ...
php轮播怎么调整图片大小,微信小程序内轮播图怎样设置成自适应高度
这次给大家带来微信小程序内轮播图怎样设置成自适应高度,微信小程序内轮播图怎设置成自适应高度的注意事项有哪些,下面就是实战案例,一起来看一下. 我的思路是:获取屏幕宽度,获取图片的宽高,然后等比设置当前 ...
微信小程序之轮播图swiper组件自定义指示点样式
微信小程序 - swiper组件定义一个轮播图 swiper 组件: // swiper.wxml <swiper indicator-dots="true">< ...
微信小程序vue轮播图_微信小程序使用swiper组件实现类3D轮播图
Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. Swiper开源.免费.稳定.使用简单. ...

微信小程序---swiper轮播图组件

微信小程序—swiper轮播图组件

微信小程序---swiper轮播图组件相关推荐

最新文章

热门文章