微信小程序——tab切换内容
wxml:
wxss:
js:
.wxml代码:
<view class="body">
<view class="nav bc_white">
<view class="{{selected?'red':'default'}}" bindtap="selected">系统提醒</view>
<view class="{{selected1?'red':'default'}}" bindtap="selected1">优惠活动</view>
</view>
<view class="{{selected?'show':'hidden'}}">for system</view>
<view class="{{selected1?'show':'hidden'}}">for activity</view>
</view>
.wxss代码:
page{background-color:#edf0f3;}
.nav{width:100%;height:100rpx;display:flex;flex-direction:row;}
.default{line-height:100rpx;text-align:center;flex:1;border-right:1px solid gainsboro;color:#000;font-weight:bold;font-size:28rpx;}
.red{line-height:100rpx;text-align:center;color:#fc5558;flex:1;border-right:1px solid gainsboro;font-weight:bold;font-size:28rpx;}
.show{display:block;text-align:center;line-height:200rpx;}
.hidden{display:none;text-align:center;line-height:200px;}
.js代码:
Page({
data:{
selected:true,
selected1:false
},
selected:function(e){
this.setData({
selected1:false,
selected:true
})
},
selected1:function(e){
this.setData({
selected:false,
selected1:true
})
}
})
转载于:https://www.cnblogs.com/MrsQiu/p/7196515.html
微信小程序——tab切换内容相关推荐
- navtab触底 小程序_微信小程序TAB切换效果
微信小程序tab切换效果 话不多说,先上效果图 主要是让在一个WXML上面显示2个页面,用来分页展示东西. 直接上代码了: 首先是wxml {{item}} A页 B页 然后是wxcss样式代码 .t ...
- 微信小程序 tab切换展示不同的内容
index.wxml <view class='shopDetail-box'><view class="tab-left" ><view class ...
- 微信小程序tab切换(点击标题切换,滑动屏幕切换)
效果图: WXML文件 <view class="tab"><scroll-view class="nav" scroll-x="t ...
- 微信小程序 tab切换
设置背景颜色就直接在page里设置 page {background-color: rgb(242, 242, 242);} tab切换: navigator 页面链接 传参的格式为url=&q ...
- 微信小程序tab切换
一:获取数据,初始化存储切换下标的变量以及数据 二:点击切换高亮同时设置子数据 1.定义变量 data: {list:[],//总数据tabIndex:0,//tab切换利用的下标childrenLi ...
- 微信小程序Tab选项卡切换大集合
代码地址如下: http://www.demodashi.com/demo/14028.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.c ...
- PHP更新小程序,微信小程序Tab页切换更新数据详细介绍
这篇文章主要介绍了微信小程序 Tab页切换更新数据的相关资料,需要的朋友可以参考下 微信小程序 Tab页切换更新数据 微信小程序还处于内测阶段,最不方便的莫过于官方在不停的更新,前几天写的功能隔个几天 ...
- 微信小程序-tab左右滑动切换
微信小程序-tab左右滑动切换 一.简介 1.核心思想 二.实现 1.wxml实现 2.js实现 3.wxss实现 三.参考和总结 四.优化 0.效果图 1.每个tab长度自适应 2.先前隔tab点击 ...
- 微信小程序滚动播放内容
目录 微信小程序创建项目配置底部导航栏 微信小程序滚动播放内容 微信小程序功能中心模块开发 微信小程序个人中心页面开发 微信小程序获取电话号码 微信小程序显示列表数据 微信小程序显示分页列表 微信小程 ...
最新文章
- html5 audio标志改变音量,HTML5之Audio(二)—— processor调节音量
- 再和“面向对象”谈恋爱 - 对象简介(一)
- 图解计算机图形学三维变换算法
- 安装python3.6.1_如何安装python3.6.1/
- 生产活动目录不宜做快照,克隆,直接备份VMDK;
- SAP License:凭证冲销
- 缓冲区提前释放,导致H264保存及播放错误
- matlab中低通滤波器程序,MATLAB低通滤波器程序
- 2022-01-11每日刷题打卡
- npm下载安装 nodejs下载安装
- html如何设置整体字体颜色,html字体颜色 html如何设置字体颜色
- css文字加边框镂空文字_如何使用CSS创建镂空边框设计
- jmeter性能测试2-模拟多用户登录
- 图片格式转换jpg,图片批量转成jpg
- 配对t检验的应用条件是什么_配对t检验在实际工作中的应用
- 基于session推荐的论文阅读
- WordPress XMLRPC安全漏洞
- 不同波特率传输时间计算
- Android SDK 2.1 下载与安装教程
- 高一c语言期末试题,江苏省海安高中2020-2021学年高一上学期期中考试信息技术试题 Word版含答案...
热门文章
- html表单和输入方法,HTML 表单和输入
- x3650m5不自动进系统_自动起停系统不工作?可能有这几种情况
- python整理数据_Python常见数据结构整理
- yii2 引入php文件,Yii2中YiiBase自动加载类、引用文件方法分析(autoload)
- 控制单元维修_「维修案例」一汽大众迈腾挡风玻璃喷水电机不喷水,实操步骤解决...
- rsync文件实时同步_从文件同步rsync算法谈起
- Spring中 @Autowired注解与@Resource注解的区别
- 查看pod网络范围_可用网络的ip地址范围
- mysql 分页有数据没了_mysql分页丢数据的分析
- elasticsearch 客户端工具_万字长文:详解 Spring Boot 中操作 ElasticSearch