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


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 相关文章推荐
javascript smipleChart 简单图标类
Jan 12 Javascript
jQuery焦点图切换简易插件制作过程全纪录
Aug 27 Javascript
javascript中call apply 的应用场景
Apr 16 Javascript
JS实现简单表格排序操作示例
Oct 07 Javascript
angular6.0开发教程之如何安装angular6.0框架
Jun 29 Javascript
vue脚手架搭建项目的兼容性配置详解
Jul 17 Javascript
Angular6封装http请求的步骤详解
Aug 13 Javascript
jQuery中$原理实例分析
Aug 13 jQuery
vue生命周期和react生命周期对比【推荐】
Sep 19 Javascript
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
Nov 02 Javascript
vue封装一个简单的div框选时间的组件的方法
Jan 06 Javascript
vue+node 实现视频在线播放的实例代码
Oct 19 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
生成静态页面的php函数,php爱好者站推荐
2007/03/19 PHP
PHP中使用imagick实现把PDF转成图片
2015/01/26 PHP
php中请求url的五种方法总结
2017/07/13 PHP
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
2010/05/27 Javascript
基于jquery的表格排序
2010/09/11 Javascript
jQuery对象和Javascript对象之间转换的实例代码
2013/03/20 Javascript
用客户端js实现带省略号的分页
2013/04/27 Javascript
javascript生成随机数的方法
2014/05/16 Javascript
javascript原型链继承用法实例分析
2015/01/28 Javascript
jquery实现先淡出再折叠收起的动画效果
2015/08/07 Javascript
详解Bootstrap glyphicons字体图标
2016/01/04 Javascript
AngularJS  自定义指令详解及实例代码
2016/09/14 Javascript
nodejs图片处理工具gm用法小结
2018/12/12 NodeJs
Laravel admin实现消息提醒、播放音频功能
2019/07/10 Javascript
关于vue项目中搜索节流的实现代码
2019/09/17 Javascript
JS数据类型STRING使用实例解析
2019/12/18 Javascript
pyqt4教程之实现windows窗口小示例分享
2014/03/07 Python
python 队列详解及实例代码
2016/10/18 Python
Python简单计算数组元素平均值的方法示例
2017/12/26 Python
Python3.4 splinter(模拟填写表单)使用方法
2018/10/13 Python
Tensorflow实现酸奶销量预测分析
2019/07/19 Python
python:动态路由的Flask程序代码
2019/11/22 Python
Python图像处理库PIL中图像格式转换的实现
2020/02/26 Python
python GUI库图形界面开发之PyQt5 Qt Designer工具(Qt设计师)详细使用方法及Designer ui文件转py文件方法
2020/02/26 Python
HTML4和HTML5之间除了相似以外的10个主要不同
2012/12/13 HTML / CSS
SmartBuyGlasses丹麦:网上购买名牌太阳镜、眼镜和隐形眼镜
2016/10/01 全球购物
普通院校学生的自荐信
2013/11/27 职场文书
物业管理计划书
2014/01/10 职场文书
大学生的创业计划书就该这么写
2014/01/30 职场文书
南京青奥会口号
2014/06/12 职场文书
cf战队收人口号
2014/06/21 职场文书
店面出租协议书范本
2014/11/28 职场文书
2015秋季开学典礼演讲稿
2015/07/16 职场文书
2015年小学教师培训工作总结
2015/07/21 职场文书
贴吧吧主申请感言
2015/08/03 职场文书
MySQL注入基础练习
2021/05/30 MySQL