swiper 定义放多少张图片,小程序swiper轮播图，自定义样式，两种方法：原生方法和bindchange方法；将点点改为数字（当前第几张 /总共几张）;点击点点跳转当前图片...
一、点点部分
1.1.通过原生方法
(1)wxml文件
(2)wxss
/* 轮播图部分 */
.swiperBar {
width: 690rpx;
height: 337rpx;
margin: 0 auto;
position: relative;
}
.swiperBar swiper {
width: 100%;
height: 337rpx;
}
.swiperBar image {
width: 690rpx;
height: 310rpx;
-webkit-border-radius: 12rpx;
-moz-border-radius: 12rpx;
border-radius: 12rpx;
-webkit-box-shadow: 0 0 16rpx rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 0 16rpx rgba(0, 0, 0, 0.25);
box-shadow: 0 0 16rpx rgba(0, 0, 0, 0.25);
}
/* 设置点点的层级 */
.swiperBar .wx-swiper-dots.wx-swiper-dots-horizontal {
position: absolute;
top: 328rpx;
z-index: 999;
}
/* 设置点点的样式 */
.swiperBar .wx-swiper-dot {
width: 8rpx;
display: inline-flex;
height: 8rpx;
margin-left: 12rpx;
justify-content: space-between;
}
.swiperBar .wx-swiper-dot::before {
content: '';
flex-grow: 1;
background: #999;
border-radius: 8rpx;
-webkit-border-radius: 8rpx;
-moz-border-radius: 8rxp;
}
/* 当前点点的样式 */
.swiperBar .wx-swiper-dot-active::before {
background: #ff8a00;
}
.swiperBar .wx-swiper-dot.wx-swiper-dot-active {
width: 18rpx;
}
(3)效果展示
1.2.bindchange方法
(1)wxml
(2)wxss
.banner{
height: auto;
position: relative;
}
.bannerswipers{
width: 100%;
height: 350rpx;
}
.bannerswipers image{
width: 100%;
height: 100%;
display: block
}
/*用来包裹所有的小圆点 */
.bannerdots{
width: 750rpx;
height: 36rpx;
display: flex;
flex-direction: row;
position: absolute;
left:0;
bottom: 20rpx;
}
/*未选中时的小圆点样式 */
.bannerdot{
width: 16rpx;
height: 16rpx;
margin-right: 26rpx;
background-color: yellow;
border-radius: 16rpx;
}
/*选中以后的小圆点样式 */
.banneractive{
width: 32rpx;
height: 16rpx;
background-color: coral;
}
.flex {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
display: box;
flex-wrap: wrap;
}
.alignC {
/*元素居中*/
align-items: center;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-o-align-items: center;
}
.flexC {
-webkit-box-pack: center;
justify-content: center;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-o-justify-content: center;
}
(3)js
Page({
data: {
imgs: [
{ url: 'http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/5.jpg' },
{ url: 'http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/1.jpg' },
{ url: 'http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/2.jpg' }
],
currentSwiper: 0,
autoplay: true
},
swiperChange: function (e) {
this.setData({
currentSwiper: e.detail.current
})
}
})
(4)效果
二、改为数字(当前第几张 / 总共张数)
(1) wxml
{{(currentSwiper+1)}}/{{imgs.length}}
(2)wxss
.banner {
height: auto;
position: relative;
}
.bannerswipers {
width: 100%;
height: 350rpx;
}
.bannerswipers image {
width: 100%;
height: 100%;
display: block;
}
/*用来包裹所有的小圆点 */
.bannerdots {
width: 750rpx;
height: 36rpx;
display: flex;
flex-direction: row;
position: absolute;
left: 0;
bottom: 20rpx;
}
/*未选中时的小圆点样式 */
.bannerdot {
width: 16rpx;
height: 16rpx;
margin-right: 26rpx;
background-color: yellow;
border-radius: 16rpx;
}
/*选中以后的小圆点样式 */
.banneractive {
width: 32rpx;
height: 16rpx;
background-color: coral;
}
.flex {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
display: box;
flex-wrap: wrap;
}
.alignC {
/*元素居中*/
align-items: center;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-o-align-items: center;
}
.flexC {
-webkit-box-pack: center;
justify-content: center;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-o-justify-content: center;
}
/* 改写点点为数字 */
.bannerNum {
width: 150rpx;
height: 50rpx;
line-height: 50rpx;
text-align: center;
position: absolute;
right: 10rpx;
bottom: 40rpx;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
font-size: 30rpx;
}
(3)js
Page({
data: {
imgs: [
{ url: 'http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/5.jpg' },
{ url: 'http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/1.jpg' },
{ url: 'http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/2.jpg' }
],
currentSwiper: 0,
autoplay: true
},
swiperChange: function (e) {
this.setData({
currentSwiper: e.detail.current
});
}
})
(4)效果
(5)说明
其实就是利用了一个swiper的 bindchange 监听事件，监听到当前为第几张即可；
三、点击点点跳转当前图片
说明：其实原理也比较简单，也是利用 bindchange 做事件监听，监听当前第几张；同时给点点绑定点击事件，在点击点点的时候，改变当前第几张的那个变量值；同时这个当前第几张的变量的值和swiper标签的current双向绑定，即可实现联动。
(1)wxml
{{currentSwiper+1}}
(2)wxss
.banner {
height: auto;
position: relative;
}
.bannerswipers {
width: 100%;
height: 350rpx;
}
.bannerswipers image {
width: 100%;
height: 100%;
display: block;
}
/*用来包裹所有的小圆点 */
.bannerdots {
width: 750rpx;
height: 36rpx;
display: flex;
flex-direction: row;
position: absolute;
left: 0;
bottom: 20rpx;
}
/*未选中时的小圆点样式 */
.bannerdot {
width: 50rpx;
height: 50rpx;
line-height: 50rpx;
text-align: center;
margin-right: 26rpx;
background-color: yellow;
border-radius: 100%;
color: #fff;
font-size: 30rpx;
}
/*选中以后的小圆点样式 */
.banneractive {
background-color: coral;
}
.flex {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
display: box;
flex-wrap: wrap;
}
.alignC {
/*元素居中*/
align-items: center;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-o-align-items: center;
}
.flexC {
-webkit-box-pack: center;
justify-content: center;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-o-justify-content: center;
}
/* 改写点点为数字 */
.bannerNum {
width: 150rpx;
height: 50rpx;
line-height: 50rpx;
text-align: center;
position: absolute;
right: 10rpx;
bottom: 40rpx;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
font-size: 30rpx;
}
(3)js
Page({
data: {
imgs: [
{ url: 'http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/5.jpg' },
{ url: 'http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/1.jpg' },
{ url: 'http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/2.jpg' }
],
currentSwiper: 0,
autoplay: true
},
// swiper 监听事件
swiperChange: function (e) {
this.setData({
currentSwiper: e.detail.current
});
},
// 点击跳转到当前的图片
goCurrent(e){
var current = e.currentTarget.dataset.current;
this.setData({
currentSwiper: current
});
}
})
(4)效果
swiper 定义放多少张图片,小程序swiper轮播图，自定义样式，两种方法：原生方法和bindchange方法；将点点改为数字（当前第几张 /总共几张）;点击点点跳转当前图片...相关推荐
- 【微信小程序】小程序实现轮播图效果--swiper组件(一步步教你如何实现)
文章目录 前言 1.引入外部链接图片资源 2.让swiper来调整适应图片的宽高 3.实现轮播效果--autoplay 总结 欢迎点赞,收藏,加关注 前言 此例子是用微信小程序组件swiper来实现轮 ...
- 小程序实现轮播图跳转页面和小程序
小程序实现轮播图跳转页面和小程序 文章目录 小程序实现轮播图跳转页面和小程序 跳转小程序 Object object 使用限制 需要用户触发跳转 需要用户确认跳转 示例代码 在我们开发微信小程序时候, ...
- php轮播怎么调整图片大小,微信小程序内轮播图怎样设置成自适应高度
这次给大家带来微信小程序内轮播图怎样设置成自适应高度,微信小程序内轮播图怎设置成自适应高度的注意事项有哪些,下面就是实战案例,一起来看一下. 我的思路是:获取屏幕宽度,获取图片的宽高,然后等比设置当前 ...
- 微信小程序实现轮播图（超简单）
Tips:微信小程序可以在HbuilderX用HTML标签(如Ddiv.span等)写前端代码,也可以用微信小程序语法写(view.swiper标签),然后npm run dev编译后,在微信开发者工 ...
- 微信小程序之轮播图的设置
接口地址 1.获取轮播图数据列表的接口 [GET] https://www.escook.cn/slides 页面.js: wxml页面: <!-- 轮播图区 --> <swipe ...
- 层叠轮播图、小程序3D轮播图、小程序轮播图、折叠轮播图、叠式轮播图、微信小程序叠式轮播图实现、小程序层叠轮播图swiper、Taro层叠轮播图、Taro叠式轮播图
好久没写博客了,最近这项目中有个叠式轮播的需求 在网上找了一堆 都没有自己想要的 最开始被 TaroUI和小程序 自带的swiper困扰 一直以为是swpier的升级版 试了好久 也没改造成功 干脆自 ...
- 微信小程序的轮播图+视频+图片（swiper）
项目简介:一个商城小程序 需求场景:在首页加一个轮播图,轮播图包含多个视频和多张图片,视频播放,图片页面跳转页面 实现技术:swiper 思路(一):刚开始写的时候,用的是将video直接嵌套在swi ...
- 微信小程序之轮播图swiper组件自定义指示点样式
微信小程序 - swiper组件 定义一个轮播图 swiper 组件: // swiper.wxml <swiper indicator-dots="true">< ...
- 微信小程序vue轮播图_微信小程序使用swiper组件实现类3D轮播图
Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. Swiper开源.免费.稳定.使用简单. ...
最新文章
- 细节详解 | Bert，GPT，RNN及LSTM模型
- I2C总线学习(二)--数据传送格式
- 数字图像处理：第三章 灰度直方图
- 多线程可以使用计算机多核那,【多线程逻辑面试题】面试问题：异步操作的优缺… - 看准网...
- 理解MySQL——索引与优化
- R语言入门2---R语言基础绘图
- 企业应该如何选型ERP?
- TypeScript入门教程 之 const
- 年薪20万软件测试工程师都具备的能力，你有吗？
- 2017CCPC哈尔滨 M：Geometry Problem（随机）
- libtoolize: error: Please install GNU M4, or 'export M4=/path/to/gnu/m4'
- 打开大数据研究的潘多拉魔盒
- Luogu1373 小a和uim之大逃离
- 计算机思维导图药剂学,思维导图在药剂学教学中的应用
- php集成环境 linux,linux下搭建php的集成环境
- windows10如何使用Wallpaper Engine实现动态锁屏壁纸？把WE的壁纸应用到锁屏。
- php做支付宝接口测试,支付宝接口调试经验总结
- Horner method
- [渝粤教育] 商丘职业技术学院 Java Web应用程序开发 参考 资料
- 小目标检测的一些理解