分享好友 编程语言首页 频道列表

微信小程序写tab切换 微信小程序tab切换数据延迟

小程序文章/教程  2023-02-09 09:330

微信小程序之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{}
.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
        })
    }
})

 

 

方法二：纯数据驱动

index.wxml

<text  data-current="0" class="{{currentTab == 0? 'active' : ''}}">消息</text>
<text  data-current="1" class="{{currentTab == 1 ? 'active' : ''}}">通知</text>
<view hidden="{{isShow}}">消息</view>
<view hidden="{{!isShow}}">消息</view>

index.js

data: {
isShow: true,
currentTab: 0
}
switcher: function (e) {
    if (this.data.currentTab == e.target.dataset.current) {
        return false
    } else {
        var showMode = e.target.dataset.current == 0;
        this.setData({
            currentTab: e.target.dataset.current,
            isShow: showMode
        })
    }
},

 

查看更多关于【小程序文章/教程】的文章

展开全文
相关推荐
反对 0
举报 0
评论 0
图文资讯
热门推荐
优选好物
更多热点专题
更多推荐文章
小程序 AI/AR 能力
一、关于 VisionKit1、定义VisionKit 为小程序提供了开发 AR 功能的能力，包含了 AR 在内的视觉算法。2、版本提供了 V1 和 V2 两个版本，区别如下：V1平面接口，适用于用户在平面场景下，例如桌面，地面，泛平面场景，放置虚拟物体，不提供真实世界距离。用户

0评论2023-03-08842

Python小程序——快排算法 快排 python
1 def Partition(list,p,q): 2 #这里是用来分块的算法。 3 x = list[p] 4 i = p 5 for j in range(p+1,q+1): #注意range是顾前不顾后的，所以后面的区间值要大一位 6 if list[j]x: 7 i+=1 8 list[i],list[j] = list[j],list[i] 9 10 list[p], list[i] = list[

0评论2023-02-09351

c++第一个小程序 第一个小程序是什么
 #include iostreamusing namespace std;int main(){const int SIZE=50;//定义大小。char name[SIZE]; cout"please input you name!\n"; //提示cinname;//输入cout"hello world:"nameendl; //输出return 0;}   #include iostreamusing namespace std;int m

0评论2023-02-09579

微信小程序 错误记录
1、报错this.getUserInfo(this.setData) is not a function;at pages/index/index onShow function;at api request success callback functionTypeError: this.getUserInfo is not a function在回调结果里调用这个页面的函数 this.fun() 或者 this.setData 时

0评论2023-02-09477

【小程序】添加tabBar后navigateTo失效
某页面.js//事件处理函数bindViewTap() {wx.navigateTo({url: '../logs/logs',})}, app.json"tabBar": {"backgroundColor": "black","color":"white","list": [{"pagePath": "pages/index/inde

0评论2023-02-09474

小程序组件之间的通信 小程序子父子组件通信
前言：其实之前就想写这个的，因为我觉得这么模块化的框架，组件之间通信是非常重要的，也是最经常用到的一块儿，只是之前在项目里一直没用到跨组件通信，现在用到了，也会用了，就一起写出来得了 :） 一、父、子组件之间的通信注：首先我们先将子组件在父组

0评论2023-02-09452

微信小程序左右滑动切换页面示例代码--转载
微信小程序——左右滑动切换页面事件微信小程序的左右滑动触屏事件，主要有三个事件：touchstart，touchmove，touchend。这三个事件最重要的属性是pageX和pageY，表示X，Y坐标。touchstart在触摸开始时触发事件;touchend在触摸结束时触发事件;touchmove触摸的

0评论2023-02-09564

让vue用于小程序setData方法
setData:function(obj){let that = this;let keys = [];let val,data;Object.keys(obj).forEach(function(key){keys = key.split('.');val = obj[key];data = that.$data;keys.forEach(function(key2,index){if(index+1 == keys.length){that.$set(data,key2,

0评论2023-02-09891

微信小程序 canvas导出图片模糊
//保存到手机相册save:function () {wx.canvasToTempFilePath({x: 0,y: 0,width: 375, //导出图片的宽height: 680, //导出图片的高destWidth: 375 * 750 / wx.getSystemInfoSync().windowWidth, //绘制canvas的时候用的是px， 这里换算成rpx ，导出后非常清晰

0评论2023-02-09339

微信小程序hidden问题 微信小程序隐藏view
    context.fillText('Hello World', 20, 380);                wx.drawCanvas({                    canvasId: '2',                    actions: context.getActions()                });       

0评论2023-02-09905

小程序***滑动的表格 小程序实现左右滑动
// pages/test/test.jsPage({/** * 页面的初始数据 */data: {headerList: [{name: '表头一',number: 'A201',type: "标准间"}, {name: '表头二',number: 'A202',type: "大床"}, {name: '表头三',number: 'A203',t

0评论2023-02-09530

更多推荐