小程序swiper轮播图，自定义样式，将点改为数字

最新推荐文章于 2024-05-09 10:19:32 发布
最新推荐文章于 2024-05-09 10:19:32 发布
阅读量1.8k 收藏 4
点赞数 1
分类专栏： 点改数 点其他样式 文章标签： 小程序
原文链接：https://blog.csdn.net/hangGe0111/article/details/81101621
版权

一、点点部分

1.1.通过原生方法

（1）wxml文件


<!-- 轮播图 -->
<view class='swiperBar'>
  <swiper duration="1000" indicator-dots="{{true}}" indicator-color="" interval="2000" current="0" indicator-color="#999" indicator-active-color="#ff8a00" autoplay="{{true}}">
    <block>
      <swiper-item>
        <image src="http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/5.jpg" />
      </swiper-item>
      <swiper-item>
        <image src="http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/1.jpg" />
      </swiper-item>
      <swiper-item>
        <image src="http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/2.jpg" />
      </swiper-item>
    </block>
  </swiper>
</view>

（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;
}

在这里插入图片描述

2.bindchange方法

（1）wxml

<view class="banner">
    <swiper class="bannerswipers" autoplay="{{autoplay}}" current="{{currentSwiper}}" bindchange="swiperChange">  
        <block wx:for="{{imgs}}">  
            <swiper-item>  
                 <image src="{{item.url}}"></image>  
            </swiper-item>  
        </block>  
    </swiper>  
   <!--重置小圆点的样式  -->
    <view class="bannerdots flex alignC flexC">  
        <block wx:for="{{imgs}}">  
            <view class="bannerdot{{index == currentSwiper ? ' banneractive' : ''}}"></view>  
        </block>  
    </view>  
</view>

（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

<view class="banner">
    <swiper class="bannerswipers" autoplay="{{autoplay}}" current="{{currentSwiper}}" bindchange="swiperChange">  
        <block wx:for="{{imgs}}">  
            <swiper-item>  
                 <image src="{{item.url}}"></image>  
            </swiper-item>  
        </block>  
    </swiper>  
   <!--重置小圆点的样式  -->
    <view class='bannerNum'>{{(currentSwiper+1)}}/{{imgs.length}}</view>
</view>

（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

<view class="banner">
    <swiper class="bannerswipers" autoplay="{{autoplay}}" current="{{currentSwiper}}" bindchange="swiperChange">  
        <block wx:for="{{imgs}}">  
            <swiper-item>  
                 <image src="{{item.url}}"></image>  
            </swiper-item>  
        </block>  
    </swiper>  
   <!--重置小圆点的样式  -->
    <view class="bannerdots flex alignC flexC">  
        <block wx:for="{{imgs}}">  
            <view class="bannerdot{{index == currentSwiper ? ' banneractive' : ''}}" data-current="{{index}}" bindtap='goCurrent'>{{currentSwiper+1}}</view>  
        </block>  
    </view>  
</view>

（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）效果在这里插入图片描述

Mr nan.
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
微信小程序修改swiper默认指示器样式的实例代码
10-18
主要介绍了微信小程序修改swiper默认指示器样式的实例代码,代码块是从微信开发文档中心复制的代码块，在此基础上修改官方swiper样式，需要的朋友可以参考下
使元素占满整个屏幕高度,修改swiper 圆点样式
03-29
一：微信小程序中使元素占满整个屏幕高度 在项目中经常要用到一个容器元素占满屏幕高度和宽度，然后再在这个容器元素里放置其他元素。 宽度很简单就是width:100% 但是高度呢，我们知道的是height:100%必须是在父元素的高度给定了的情况下才可以。 以前我的做法是用js获取屏幕的高度，然后将其赋值给height， 屏幕高度在网页中为:window.innerHeight; 在微信小程序中则需要调用wx.getSystemInfo接口，然后通过setData赋值 但是显然通过js来进行的，效率上肯定不如css直接给定样式。 于是我们使用另一种方法: 在网页中设置body,html{heigh
使用Swiper自定义分页样式
最新发布
qq_47138033的博客
05-09 198
【代码】使用Swiper自定义分页样式。
微信小程序自定义轮播图(常用四种效果)
09-26
微信小程序常用轮播图，常见四种轮播图，效果和PC的一样，常见的四种，可以自己修改……………………………………………………………………………………………………………………
自定义swiper面板指示点的样式，image图片自适应宽度比例显示
03-29
免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。
swiper轮播图分页器样式修改
08-04
swiper轮播图分页器样式修改
Swiper 轮播图 点变数字
qq_46448547的博客
07-04 329
uniapp swiper点变数字
微信小程序swiper fraction数字导航
sinrryzhang的博客
03-26 949
在做小程序的时候，收到的设计图是这样的 一般来说小程序的圆点导航用的比较多，官方文档也介绍了如何改变圆点导航样式，但是如何像swiper4那样将paginationType改为fraction呢。虽然没有像swiper那样有paginationType属性，但是文档中mode参数有一个字段为current 再通过bindchange事件，将当前页数渲染到页面上。 wxml： ...
小程序轮播图带数字序号
xiaoququ的博客
08-04 2715
// bindchange='onSlideChange' 滑动时触发 <swiper autoplay circular="true" bindchange='onSlideChange'> <!-- <block wx:for="{{imgUrls}}"> --> <swiper-item> ...
微信小程序开发--如何在swiper中显示两个item以及下一个item的部分内容
include的博客
07-20 8789
如何在swiper中显示两个item以及下一个item的部分内容 我所实现的效果 我实现的代码 <!--图片轮播图--> <!--要展示两个item 以及下一个item的部分内容，circular需要设置为false，或者不设置，display- multiple-items设置为2，next-margin按照自己的需求设置--> <swi...
轮播分页器数字类型，当前页和总页数小于9时前面添加0
CsDn_ZhiHui的博客
05-20 860
在写项目的时候难免会遇到这样的问题 要求：将底部分页器改为数字类型，页面小于10页时前面添加0比如“01，02，03。。。” 在这里我们可以使用swiper里面自定义的分页器类型来解决，废话不说上代码。 <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide blue-slide">1</div> <div class
swiper自定义分页器的样式
01-21
本文实例为大家分享了swiper自定义分页器的样式代码，供大家参考，具体内容如下 js主要代码 pagination: { // 自定义分页器的类名----必填项 el: '.custom-pagination', // 是否可点击----必填项 clickable: true, // 分页的类型是自定义的----必填项 type: 'custom', // 自定义特殊类型分页器，当分页器类型设置为自定义时可用。 renderCustom: function (swiper, current,
js-swiper-分页标签加进度条-自定义位置加进度条
07-30
js-swiper-分页标签加进度条-自定义位置加进度条
微信小程序 swiper 组件实现层叠轮播图，同时在轮播图中自定义信息
03-24
微信小程序 swiper 组件实现层叠轮播图，同时自定义指示点样式和图片描述信息
微信小程序使用swiper组件实现层叠轮播图
10-17
主要为大家详细介绍了微信小程序使用swiper组件实现层叠轮播图，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
10-17
主要介绍了微信小程序非swiper组件实现的自定义伪3D轮播图效果,涉及微信小程序事件响应及元素属性动态操作实现轮播图效果相关技巧与注意事项,需要的朋友可以参考下
微信小程序实现Swiper轮播图效果
12-13
本文实例为大家分享了微信小程序轮播图的具体代码，供大家参考，具体内容如下 1.逻辑层 mine.js // pages/mine/mine.js Page({ /** * 页面的初始数据 */ data: { /*轮播图 配置*/ imgUrls: [ '...
如何实现轮播图的内容的多少随div的大小动态变化_小程序学习日志8：swiper滑动轮播组件（轮播图）（上）...
weixin_39777637的博客
12-04 337
导读经过这段时间的学习，大家对小程序的编程和代码掌握的如何了呢？今天我们来讲小程序里实现轮播图的方法，大家要专心看哦。组件这个组件叫做滑块组件，嗯，听起来还挺形象的，你看滑动轮播图的时候是不是就像滑动一个个方框的一样？首先，按着老规矩，我们需要先打开微信小程序开发者文档，看一下关于swiper组件的相关内容：这里要说一下，跟swiper有关的还有这个swiper-item的组件，这个组件和swip...
jQuery建立轮播图-数字跟随图片变化-鼠标点击切换图片-自动轮播功能
debj 的博客
01-07 974
jQuery 制作轮播图代码分享
小程序swiper轮播图
07-09
小程序的swiper轮播图是一种常用的组件，用于展示多张图片或卡片。它可以实现自动播放、手动切换、循环播放等功能。在小程序中使用swiper组件，你可以通过以下步骤来实现轮播图： 1. 在小程序的wxml文件中添加...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值