微信小程序之tab切换效果
微信小程序之tab切换效果,如图:
最近在学习微信小程序并把之前的公司app搬到小程序上,挑一些实现效果记录一下(主要是官方文档里没说的,毕竟官方文档只是介绍功能)
.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
})
}
})
微信小程序之tab切换效果相关推荐
- 原生微信小程序实现tab切换效果demo
效果图 Wxml <!-- tab框 --> <view class="nav_title"><view class="nav_tab&qu ...
- 微信小程序顶部tab切换以及滑动
效果图图片如下 实现代码xml中 <view class="swiper_tab_view"><scroll-view scroll-x='true' scrol ...
- 微信小程序实现tab切换和吸顶效果
在项目中合理的采用webapp的组件库能够很好的提高我们的开发效率,我们也应该合理的进行运用. 首先我们是对手机的状态栏的代码进行了自定义. 其次就是采用组件库的van-sticky进行吸顶距离计算 ...
- 微信小程序 点击切换tab跟随动画
微信小程序 点击切换tab跟随动画 <view class='tabbox'><view wx:for="{{title}}" class='tab {{curr ...
- 微信小程序实现城市选择效果(超详细)
直接进入正题 首先在项目中同级创建一个components文件夹,在文件夹下创建region-picker文件夹,在该文件夹点击右键新建Component就会创建名为 region-picker.js ...
- 微信小程序轮播图中间变大_微信小程序实现带放大效果的轮播图
本文实例为大家分享了微信小程序实现带放大效果的轮播图,供大家参考,具体内容如下 效果如图 WXML WXSS .Carousel{ margin-top: 49px; background-color ...
- php文字左右滚动通告,微信小程序左右滚动公告栏效果代码实例
这篇文章主要介绍了微信小程序左右滚动公告栏效果代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 代码如下 {{notice}} x data: ...
- 微信小程序心形点赞效果
微信小程序心形点赞效果 前言 准备 实现 原理 布局 样式 逻辑实现 尾巴 前言 之前写过一篇文章微信小程序Canvas绘图API,简单介绍了下微信小程序(下面统称小程序)Canvas绘图相关API的 ...
- 微信小程序实现点赞气泡效果
微信小程序实现点赞气泡效果 先上代码: <view class="listImg"><block wx:for="{{8}}" wx:key= ...
- ar 微信小程序_微信小程序可以实现AR效果了
微信小程序可以实现AR效果了 金羊网 作者:马化展 2019-07-08 金羊网讯 记者马化展报道:7月5日,微信宣布微信小程序可实现AR效果了.同日,首个小程序AR动态试妆的美妆品牌小程序正式落 ...
最新文章
- 机器学习模型质量评价标准 — 精准率、召回率
- java与json,java与json
- matlab偶极矩电场强度分布图_1.2.10 电介质在外电场下的极化、电极化强度、电极化率...
- 法国时隔20年再折桂!“网易云信:世界杯巅峰决战之夜”活动圆满结束!
- Hadoop之资源调度器与任务推测执行
- VS2015 vc++ 项目出现new.h找不到的错误
- 基于JAVA+SpringBoot+Mybatis+MYSQL的在线论坛管理系统
- Log4j CVE-2021-44228 漏洞及Spring Boot解决方案
- mysql关联力控_力控软件和三菱PLC的通讯模块通讯设定
- 【mqtt】client测试工具使用
- 计算机操作系统知识点总结(有这一篇就够了!!!)
- 偏差平方和说明什么_什么是平方误差和均方误差
- 直流电机驱动模块介绍
- Android 自定义圆角TextView控件 带边框 非shape
- 【重识云原生】第六章容器基础6.4.10.3节——StatefulSet实操案例-部署WordPress 和 MySQL
- HTML5 之 Figure Figcaption 标签
- 用Python中的py2neo库操作neo4j,搭建简单关联图谱—基于家有儿女中的人物关系
- 迈向“5G智慧校园”的第一步,启用人脸识别门禁设备
- JavaScript下的setTimeout(fn,0)的作用,涨知识了
- 线性规划第一阶段入基变量和出基变量选择的细节讨论
热门文章
- Exp2_固件程序设计 20165226_20165310_20165315
- jwplayer android m3u8,播放上jwplayer M3U8文件,而RTMP
- matlab安装matconvnet
- Unity快速入门教程-手机游戏开发前的准备(手机模拟器Simulator)
- XUI -Android原生UI框架的配置
- simulink电子节气门控制模型发动机电子节气门控制模型,有说明文档,教程。
- 显示杂谈(7)-色坐标图的来源1
- GEOS-Chem笔记——模式下载安装+驱动数据+运行流程
- 如何批量清理DWG文件?DWG文件清理教程
- 使用Python找丑数