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

2023-02-09 学习力0

核心提示：微信小程序之tab切换效果，如图：最近在学习微信小程序并把之前的公司app搬到小程序上，挑一些实现效果记录一下（主要是官方文档里没说的，毕竟官方文档只是介绍功能）.wxml代码：view class="body"view class="nav bc_white"view class="{{selected?'red':'d

微信小程序之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 评论 0

免责声明：本文仅代表作者个人观点，与乐学笔记（本网）无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
本网站有部分内容均转载自其它媒体，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责，若因作品内容、知识产权、版权和其他问题，请及时提供相关证明等材料并与我们留言联系，本网站将在规定时间内给予删除等相关处理.

小程序上传wx.uploadFile - 小程序请假-请求

小程序上传wx.uploadFileUploadTask wx.uploadFile(Object object)将本地资源上传到服务器。客户端发起一个 HTTPS POST 请求，其中 content-type 为 multipart/form-data。使用前请注意阅读相关说明。num=1;当num==3时，设置按钮隐藏直接上代码：view class='

03-08
微信小程序中overflow:scroll失效的问题微信小

.common-pop-table {padding: 0 30rpx;overflow: scroll;max-height: 70%;}研究后发现，要实际的设置对应的那个维度的高度，wcss改成.common-pop-table {padding: 0 30rpx;overflow: scroll;max-height: 400px;}就恢复正常了

03-08
小程序 AI/AR 能力

一、关于 VisionKit1、定义VisionKit 为小程序提供了开发 AR 功能的能力，包含了 AR 在内的视觉算法。2、版本提供了 V1 和 V2 两个版本，区别如下：V1平面接口，适用于用户在平面场景下，例如桌面，地面，泛平面场景，放置虚拟物体，不提供真实世界距离。用户

03-08
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[

02-09
总结一些 egret项目接小程序时遇到的问题及解

1，https://blog.csdn.net/u013052238/article/details/81456908 这个地址的一些问题是一部分，其中第6条，当在wxgame.ts中仿照已有的暴露库给window的方法写完之后，仍会报错，本人遇到的是： jszip is not defined : 也尝试过其他前辈分享的解决方

02-09
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

02-09
微信小程序错误记录

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 时

02-09
【小程序】添加tabBar后navigateTo失效

某页面.js//事件处理函数bindViewTap() {wx.navigateTo({url: '../logs/logs',})}, app.json"tabBar": {"backgroundColor": "black","color":"white","list": [{"pagePath": "pages/index/inde

02-09
微信小程序npm引入vant-weapp库的方法

1、终端打开小程序所在目录 2、npm init初始化，初始化完成之后，小程序项目中就会出现package.json文件，说明已经初始化成功 3、npm install --production 安装生产环境，不要npm install都给装上，以免小程序包过大 4、安装vant ：npm i vant-weapp

02-09
小程序组件之间的通信小程序子父子组件通信

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

02-09