微信小程序实现滑动切换自定义页码的方法分析


Posted in Javascript onDecember 29, 2018

本文实例讲述了微信小程序实现滑动切换自定义页码的方法。分享给大家供大家参考,具体如下:

效果如下:

微信小程序实现滑动切换自定义页码的方法分析

这里三个图片使用了swiper组件进行轮播,下方的页码数字1、2、3会随着图片的切换变动位置

在微信小程序中我们是无法操作dom的,那么

var div = document.getElementById('id');
div.setAttribute("class", "className");

这种方式实现。

然后我们可以考虑使用hidden或者wx:if的方式,将三个页码显示的view进行轮流显示/隐藏操作。但是不知道为什么这种方式只支持一次操作

最后,使用了display:none/block来达到影藏/显示状态的切换,这个display是写在wxml文件中的

<view class="bottomView" >
  <view class="bottom1" style="display:{{bottomHidden1}}" >
   <view class="pageCur">
   <text class="textPageCur textFont">{{index+1}}-5</text>    //index是因为上方采用了<block wx:for="{{itemInfor}}" >显示内容,index从0开始计数便是当前下标
   </view>
   <view class="buttomImg">
   <image clss="horImg" mode="top left" src="../img/horizontal.jpg"></image>
   </view>
  </view>
  <view class="bottom2" style="display:{{bottomHidden2}}">
   <view class="pageCur">
   <text class="textPageCur textFont" > {{index+1}}-5</text>
   </view>
   <view class="buttomImg">
    <image clss="horImg" mode="top left" src="../img/horizontal.jpg"></image>
   </view>
  </view>
  <view class="bottom3" style="display:{{bottomHidden3}}">
   <view class="pageCur">
   <text class="textPageCur textFont">{{index+1}}-5</text>
   </view>
   <view class="buttomImg">
    <image clss="horImg" mode="top left" src="../img/horizontal.jpg"></image>
   </view>
   </view>
  </view>

以上这就是页码显示部分,页码的组成包括一个text和一个image(下方白色横线),这个内容嵌套在<swiper-item></swiper-item>

bottomView采用position:fixed的定位方式固定在底部设置高和宽,bottom3、2、1采用position:absolute的方式。需要注意的是,如果在bottomView使用了display:flex,将无法使用position。所以在这一部分未采用flex。但是上面的文字和图片部分采用的是display:flex实现的,这种方式比较简单

在swiper中,绑定了bindchange="swiperChange"方法,用于在页面切换时触发下方页码的变化动作,在js文件中该方法如下:

Page({
 data: {
 bottomHidden1:"block",
 bottomHidden2: "none" ,
 bottomHidden3: "none" ,
 },
 swiperChange:function(event){
 var currentView=event.detail.current;     //此处使用了swiper的bindchange事件带过来的参数current,这个参数从0开始计数,内容为当前页码
 var isHidden1 ="";
 var isHidden2 ="";
 var isHidden3 ="";
 switch (currentView) {
  case 1:
  isHidden1 = "none";
  isHidden2 = "block";
  isHidden3 = "none";
  break;
  case 2:
  isHidden1 = "none";
  isHidden2 = "none";
  isHidden3 = "block" ;
  break;
  case 0:
  isHidden1 = "block";
  isHidden2 = "none";
  isHidden3 = "none";;
  break;
 }
 this.setData({
  bottomHidden1:isHidden1,
  bottomHidden2: isHidden2,
  bottomHidden3: isHidden3
 });
 },

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
文本加密解密
Jun 23 Javascript
XML的代替者----JSON
Jul 21 Javascript
document.onreadystatechange事件的用法分析
Oct 17 Javascript
Firefox和IE兼容性问题及解决方法总结
Oct 08 Javascript
JavaScript实现点击文字切换登录窗口的方法
May 11 Javascript
Angularjs中三种数据的绑定策略(“@”,“=”,“&amp;”)
Dec 23 Javascript
微信小程序 下拉列表的实现实例代码
Mar 08 Javascript
jQuery 控制文本框自动缩小字体填充
Jun 16 jQuery
值得收藏的八个常用的js正则表达式
Oct 19 Javascript
vue-cli2.0转3.0之项目搭建的详细步骤
Dec 11 Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
Jun 07 Javascript
微信小程序新闻网站详情页实例代码
Jan 10 Javascript
vue实现分页组件
Jun 16 #Javascript
如何用RxJS实现Redux Form
Dec 29 #Javascript
Vue.js结合bootstrap前端实现分页和排序效果
Dec 29 #Javascript
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
Dec 29 #jQuery
javascript实现计算指定范围内的质数示例
Dec 29 #Javascript
基于vue.js组件实现分页效果
Dec 29 #Javascript
详解Vue.js v-for不支持IE9的解决方法
Dec 29 #Javascript
You might like
一个多文件上传的例子(原创)
2006/10/09 PHP
PHP中header函数的用法及其注意事项详解
2016/06/13 PHP
php探针使用原理和技巧讲解
2019/09/17 PHP
PHP函数用法详解【初始化、嵌套、内置函数等】
2020/06/02 PHP
js和as的稳定传值问题解决
2013/07/14 Javascript
jquery实现简洁文件上传表单样式
2015/11/02 Javascript
jquery实现简单的全选和反选功能
2016/01/02 Javascript
jQuery xml字符串的解析、读取及查找方法
2016/03/01 Javascript
在javascript中使用com组件的简单实现方法
2016/08/17 Javascript
浅析Javascript ES6中的原生Promise
2016/08/25 Javascript
Angular ng-class详解及实例代码
2016/09/19 Javascript
Bootstrap实现提示框和弹出框效果
2017/01/11 Javascript
JS高仿抛物线加入购物车特效实现代码
2017/02/20 Javascript
node.js中http模块和url模块的简单介绍
2017/10/06 Javascript
Nodejs 发布自己的npm包并制作成命令行工具的实例讲解
2018/05/15 NodeJs
详解ES7 Decorator 入门解析
2019/02/18 Javascript
Postman如何实现参数化执行及断言处理
2020/07/28 Javascript
Javascript执行上下文顺序的深入讲解
2020/11/04 Javascript
tensorflow TFRecords文件的生成和读取的方法
2018/02/06 Python
python cs架构实现简单文件传输
2020/03/20 Python
用Pycharm实现鼠标滚轮控制字体大小的方法
2019/01/15 Python
python中threading和queue库实现多线程编程
2021/02/06 Python
python包的导入方式总结
2021/03/02 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
世界上最大的在线学习和教学市场:Udemy
2017/11/08 全球购物
师德师风承诺书
2014/05/23 职场文书
运动会广播稿200字
2014/10/18 职场文书
优秀教师单行材料
2014/12/16 职场文书
端午节活动总结报告
2015/02/11 职场文书
2015安全保卫工作总结
2015/04/25 职场文书
力克胡哲观后感
2015/06/10 职场文书
教师研修随笔感言
2015/11/18 职场文书
《迟到》教学反思
2016/02/24 职场文书
Python入门之使用pandas分析excel数据
2021/05/12 Python
Python下opencv库的安装过程及问题汇总
2021/06/11 Python
java实现对Hadoop的操作
2021/07/01 Java/Android