微信小程序实现滑动的自定义页码
来源:互联网 发布:淘宝全球买手那些人 编辑:程序博客网 时间:2024/06/05 00:41
效果如下:
这里三个图片使用了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
});
},
- 微信小程序实现滑动的自定义页码
- 对《自定义GridView分页模板中页码Button的实现》中程序的改进,追加显示空行功能
- 对《自定义GridView分页模板中页码Button的实现》中程序的改进,追加显示空行功能
- 自定义GridView分页模板中页码Button的实现
- Android 自定义横向滑动菜单的实现
- 自定义ViewGroup实现ViewPager的滑动效果
- 自定义RecyclerView实现垂直滑动的ViewPager
- jsp中页码的实现
- 微信小程序自定义toast的简单实现
- 微信小程序-广告滑动栏实现
- 微信小程序实现滑动侧边栏
- 微信小程序实现滑动tab标签页
- 分页页码的前端显示的实现
- servlet实现的页码显示分页
- 用angular的指令实现页码组件
- 自定义组件实现可滑动的ToggleButton的功能..
- 利用自定义的 RecyclerView 实现相册的滑动功能
- 安卓可滑动的自定义日历控件的实现
- 最大期望算法
- 6/27android进行签名
- java发送http请求获取响应结果【工具包系列】
- xshell-常用指令汇总 linux 常用指令
- JS_获取当前时间(2017年06月27日)
- 微信小程序实现滑动的自定义页码
- 简历突出这三点,HR抢着要!
- 分类聚类区别及聚类概述
- nginx SSl redirect问题
- 01_Qt基本控件及三大布局
- MINA基础
- 【Python】命令行参数使用
- OPENSIPS安装配置过程记录
- nginx ssl配置