微信小程序:选项卡页面切换
一、功能描述
在同一个页面内实现不同展示页面的切换功能,如下图所示
二、代码实现
1. index.js
Page({ /**
* 页面的初始数据
*/
data: {
currentData : 0,
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
//获取当前滑块的index
bindchange:function(e){
const that = this;
that.setData({
currentData: e.detail.current
})
},
//点击切换,滑块index赋值
checkCurrent:function(e){
const that = this; if (that.data.currentData === e.target.dataset.current){
return false;
}else{ that.setData({
currentData: e.target.dataset.current
})
}
}
})
2. index.wxml
<view class='topTabSwiper'>
<view class='tab {{currentData == 0 ? "tabBorer" : ""}}' data-current = "0" bindtap='checkCurrent'>推荐</view>
<view class='tab {{currentData == 1 ? "tabBorer" : ""}}' data-current = "1" bindtap='checkCurrent'>热点</view>
<view class='tab {{currentData == 2 ? "tabBorer" : ""}}' data-current = "2" bindtap='checkCurrent'>关注</view>
</view>
<swiper current="{{currentData}}" class='swiper' style="height:600px;" duration="300" bindchange="bindchange">
<swiper-item><view class='swiper_con'>welcome come to 推荐</view></swiper-item>
<swiper-item><view class='swiper_con'>welcome come to 热点</view></swiper-item>
<swiper-item><view class='swiper_con'>welcome come to 关注</view></swiper-item>
</swiper>
3. index.wxss
.tab {
float: left;
width: 33.3333%;
text-align: center;
padding: 10rpx 0;
} .topTabSwiper {
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
zoom: 1;
} .topTabSwiper:after {
content: "";
clear: both;
display: block;
} .tabBorer {
border-bottom: 1px solid #f00;
color: #f00;
} .swiper {
width: 100%;
} .swiper_con {
text-align: center;
width: 100%;
height: 100%;
padding: 80rpx 0;
}
微信小程序:选项卡页面切换的更多相关文章
- 微信小程序左右滑动切换页面示例代码--转载
微信小程序——左右滑动切换页面事件 微信小程序的左右滑动触屏事件,主要有三个事件:touchstart,touchmove,touchend. 这三个事件最重要的属性是pageX和pageY,表示X, ...
- 微信小程序前端页面书写
微信小程序前端页面书写 WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构. 一.数据绑定 1. 普通写法 <view ...
- 微信小程序写tab切换
微信小程序之tab切换效果,如图: 最近在学习微信小程序并把之前的公司app搬到小程序上,挑一些实现效果记录一下(主要是官方文档里没说的,毕竟官方文档只是介绍功能) .wxml代码: <view ...
- 微信小程序:页面配置 page.json
微信小程序:页面配置 page.json 一.页面配置 page.json 如果整个小程序的风格是蓝色调,那么可以在 app.json 里边声明顶部颜色是蓝色即可. 实际情况可能不是这样,可能你小程序 ...
- 微信小程序开发--页面结构
一.微信小程序开发--页面文件组成 [page.name].js 页面逻辑文件,用于创建页面对象,以及处理页面生命周期控制和数据处理 [page.name].wxml wxml指的是Wei Xin M ...
- 图解微信小程序---实现页面的跳转与返回操作
图解微信小程序---实现页面的跳转与返回操作 代码笔记 操作步骤 第一步:在app.json配置文件中,创建跳转页面 第二步:编写首页跳转(注意跳转方式,和设置点击样式类名) 第三步:编写首页样式 第 ...
- 微信小程序开发--路由切换,页面重定向
这段时间开发了一个微信小程序,虽然小程序的导航API 官方文档写得很详细,但是在具体开发过程中还是会遇到很多不明白,或者一时转不过弯的地方. 1.页面切换传参,参数读取 1.1 wx.navigat ...
- 微信小程序之页面路由
路由方式 简介 对于路由的触发方式以及页面生命周期函数如下: 路由方式 触发时机 路由前页面 路由后页面 初始化 小程序打开的第一个页面 onLoad, onSHow 打开新页面 调用 API w ...
- 微信小程序之 页面跳转 及 调用本地json的假数据调试
一.微信小程序 跳转页面 小程序页面有2种跳转,可以在wxml页面或者js中: (1)在wxml页面中: <navigator url="../index/index"> ...
- 微信小程序WXML页面常用语法(讲解+示例)
(一) WXML 是什么 官方说明:WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构 在前面我们就已经提过,WXML,就可 ...
随机推荐
- asp.net MVC4 框架揭秘 读书笔记系列3
IIS/ASP.net管道 本节全部用图形表示便于理解和记忆 1.3.1 IIS5.x与asp.net 1.3.2 IIS 6.0与asp.net 1.3.3 IIS7.0与asp.net 基于IIS ...
- 制作动态logo教程
本人从事iOS开发工作,但对特效制作很感兴趣,现提供一份教程,制作本人logo的教程. 上图是用 Photoshop 与 After Effects 与 GIF Movie Gear 合力制作的动态图 ...
- SCCM OS播发
SCCM OS播发1.在分发点启用PXE支持2.将启动映像包分发到分发点:需要将x86和x64都分发到分发点,如果只分发x64,在客户端pxe启动时会出现 no response from wds s ...
- Maven构建时跳过部分测试
当遇到以下场景: 其他人写的单元测试影响统计结果 一些需要调用外部接口的测试暂不运行 需要在非本机环境上运行一些不回滚的单元测试 则有必要选择以下方法跳过部分测试. 在测试用例前加上注解 @Ignor ...
- HTML-head头部浅析
HTML结构 在sublime或HBuildr新建HTML文件,输入html:5,按下tab键后,自动生成的代码大致如下: <!DOCTYPE html> <html lang=&q ...
- September 10th 2017 Week 37th Sunday
Dream most deep place, only then the smile is not tired. 梦的最深处,只有微笑不累. Everyday I expect I can go to ...
- spark搭建部署
基础环境准备 安装JDK1.8+,并设置环境变量 搭建zookeeper集群 搭建Hadoop集群 Spark local模式 上传编译完成的spark安装程序到服务器上,并解压到指定目录 [root ...
- [MongoDB]------windos远程服务器部署连接
1.连接前的准备 这里就省略了服务器上安装的操作,跟上一节是一样的流程. 连接到远程服务器,首先需要到远程服务器上在mongoDb安装根目录下的bin文件夹(默认安装目录是C:\Program Fil ...
- ORA-28001: the password has expired (DBD ERROR: OCISessionBegin)解决办法
1.问题描述: 打开oracle在线管理页面发现这个错误:界面如下 2问题原因 造成这个问题的主要原因是因为DBSNMP .SYSMAN用户密码已经过期. 3解决办法 可以使用sys以管理员的身份登录 ...
- hihocoder Round #c1(hihoCoder太阁最新面经算法竞赛1 )
Test链接:https://cn.vjudge.net/contest/231849 选自hihoCoder太阁最新面经算法竞赛1 更多Test:传送门 A:区间求差 给一组区间集合A和区间集合B, ...