微信小程序_点击二级导航条切换页面
gif如下,黄色部分是不可以滑动的,蓝色部分可以滑动:
代码解说:
首先我在js自定义了navState参数用于判断导航的当前状态,
定义了data-index用于js中动态修改导航的当前状态,
nav-switch-style为选择导航条时的样式,
不可滑动视图切换很简单,用wx:if判断状态显示相应页就好了,
滑动页视图切换要用到swiper和 swiper-item,
用bindchang方法监听滑块,current 改变时会触发 change 事件
(还有个bindanimationfinish方法监听也是可以用的,详细请看官方文档)
动态的绑定了current滑块的index,这样就可以实现点击导航条滑块跟着滚动,
相反的,当滑动滑块时,就可以根据current的值来动态修改导航的状态了。
wxml代码:
<!-- 导航条 -->
<view class="nav"><view bindtap="navSwitch" data-index="0" class="{{navState==0 ? 'nav-switch-style':''}}">页面一</view><view bindtap="navSwitch" data-index="1" class="{{navState==1 ? 'nav-switch-style':''}}">页面二</view><view bindtap="navSwitch" data-index="2" class="{{navState==2 ? 'nav-switch-style':''}}">页面三</view>
</view>
<!-- 不可滑动页 -->
<view><view wx:if="{{navState==0}}" class="style-default">1</view><view wx:elif="{{navState==1}}" class="style-default">2</view><view wx:else="{{navState==2}}" class="style-default">3</view>
</view>
<!-- 滑动页 -->
<swiper bindchange="bindchange" current="{{navState}}"><block><swiper-item><view class="style-roll style-roll_one"><text>左右可滑动1</text></view></swiper-item><swiper-item><view class="style-roll style-roll_two"><text>左右可滑动2</text></view></swiper-item><swiper-item><view class="style-roll style-roll_three"><text>左右可滑动3</text></view></swiper-item></block>
</swiper>
js代码:
Page({data: {navState: 0,//导航状态},//监听滑块bindchange(e) {// console.log(e.detail.current)let index = e.detail.current;this.setData({navState:index})},//点击导航navSwitch: function(e) {// console.log(e.currentTarget.dataset.index)let index = e.currentTarget.dataset.index;this.setData({navState:index})},/*** 生命周期函数--监听页面加载*/onLoad: function(options) {},
})
wxss代码:
.nav{display: flex;justify-content: space-around;padding: 20rpx;background-color: rgb(129, 241, 55);font-size: 30rpx;
}
.nav-switch-style{color: snow;
}
.style-default{background-color: rgb(247, 229, 130);padding: 100rpx 0;text-align: center;
}
.style-roll{background-color: rgb(130, 177, 247);padding: 100rpx 0;text-align: center;
}
以上代码参考链接:https://blog.csdn.net/weixin_42063951/article/details/102914307
新问题:
swiper默认的高度只有150px,动态加载数据时,数据显示不完整。
错误解决方法:简单设置 height:100%;
解决方法:
无论切换哪个选项卡或者进行页面间的滑动,都能根据页面的布局、数据量进行动态显示页面长度。
在 js 文件中添加如下方法:
_calculateContainerHeight() {var that = this;var query = wx.createSelectorQuery();if (this.data.navState == 0) {query.select('.style-roll_one').boundingClientRect(function (rect) {that.setData({// 获取要循环标签的高度widHeight: rect.height + 100 + "px"})}).exec();} else if (this.data.navState == 1) {query.select('.style-roll_two').boundingClientRect(function (rect) {that.setData({// 获取要循环标签的高度widHeight: rect.height + 100 + "px"})}).exec();} else {query.select('.style-roll_three').boundingClientRect(function (rect) {that.setData({// 获取要循环标签的高度widHeight: rect.height + 100 + "px"})}).exec();}},
修改如下三个方法
//监听滑块bindchange(e) {// console.log(e.detail.current)let index = e.detail.current;this.setData({navState: index})// 执行方法 this._calculateContainerHeight();},//点击导航navSwitch: function (e) {// console.log(e.currentTarget.dataset.index)let index = e.currentTarget.dataset.index;this.setData({navState: index})// 执行方法 this._calculateContainerHeight();},onLoad: function (options) {this._calculateContainerHeight();},
微信小程序_点击二级导航条切换页面相关推荐
- 微信小程序实现点击导航条切换页面
本文实例为大家分享了微信小程序实现点击导航条切换页面的具体代码,供大家参考,具体内容如下 我录制了个gif如下,黄色部分是不可以滑动的,蓝色部分可以滑动. 代码解说: 首先我在js自定义了navSta ...
- 微信小程序_(校园视)开发视频的展示页_上
微信小程序_(校园视) 开发用户注册登陆 传送门 微信小程序_(校园视) 开发上传视频业务 传送门 微信小程序_(校园视) 开发视频的展示页-上 传送门 微信小程序_(校园视) 开发视频的展示页-下 ...
- 微信小程序_笔记_04_Request请求_提交审核与发布
微信小程序3天课程学习的第2天笔记 浏览器的生命周期函数: jQuery的$(document).ready(function(){})将会先一步执行 window.onload = function ...
- 微信小程序_基础组件学习02
微信小程序_基础组件学习02 swiper组件 swiper是滑块容器,也就是手机端的轮播图. swiper组件有两部分组成swiper和swiper-item. swiper-item需要放在swi ...
- 微信小程序_小程序开发框架
微信小程序_小程序开发框架 微信小程序框架 微信小程序小程序开发框架的目标是通过尽可能简单.高效的方式让开发者可以在微信中开发具有原生APP体验的服务. 框架提供了自己的视图层描述语言WXML和WXS ...
- 微信小程序入门二:底部导航tabBar
小程序底部导航栏组件tabBar,可以参考下官方的API:tabBar 先看代码 //app.json {"pages":["pages/index/index" ...
- 微信小程序_调用openAi搭建虚拟伙伴聊天
微信小程序_调用openAi搭建虚拟伙伴聊天 背景 效果 关于账号注册 接口实现 8行python搞定 小程序实现 页面结构 数据逻辑 结束 背景 从2022年的年底,网上都是chagpt的传说,个人 ...
- 垃圾慧分类微信小程序_基于图像识别、语音识别的垃圾分类小程序
垃圾分类小程序 了解垃圾分类 2019年7月1日起上海就要开始正式执行<上海市生活垃圾管理条例>,真的...不是开开玩笑随便执行 如果依旧混合投放垃圾,拒不整改个人最高可罚款200元企业单 ...
- 微信小程序实现点击拍照长按录像功能
微信小程序实现点击拍照长按录像功能 代码里面注释写的都很详细,直接上代码.官方的组件属性中有触摸开始和触摸结束属性.本功能依靠这些属性实现. .wxml代码: <!-- 相机 pages/cam ...
最新文章
- 【转】【C#】C#重绘windows窗体标题栏和边框
- Object arrays cannot be loaded when allow_pickle=False
- Java 学习之网络编程案例
- 【网络安全】一次应急实战经验思路分享
- 微软官方Windows Server 2008实战攻略系列
- bigdecimal判断等于0_vue2.0源码用到的工具函数,12个简易的复用函数,看看有多简单...
- C++中的inline用法
- php打png图片水印颜色失真,ThinkPHP水印功能实现修复PNG透明水印并增加JPEG图片质量可调整...
- 在 Google Earth 上看新闻
- 云服务器 ECS 建站教程:部署Linux主机管理系统WDCP
- 二维动态规划降维误差一般为多少_动态规划--5道题入门
- MySQL 5.7.9 GA稳定版新特性解读
- Jetson nano安装Pytorch详解
- 安全模式:天猫 App 启动保护实践
- .Net中如何操作IIS(原理篇)
- 读书笔记——5建造者模式(转)
- windows命令行压缩解压缩
- 暑期读书月开幕式暨天一寻宝活动
- 华为电脑管家最新(11.1.1.95)版完美升级安装教程
- [HCNA] 静态路由配置实例