微信小程序tab切换

一：获取数据,初始化存储切换下标的变量以及数据

二：点击切换高亮同时设置子数据

1.定义变量

  data: {list:[],//总数据tabIndex:0,//tab切换利用的下标childrenList:[],//子数据},

2.获取数据并且赋值

  /*** 生命周期函数--监听页面加载*/onLoad(options) {//调用获取数据函数this.getList();},//获取数据函数getList(){wx.request({url: 'http://localhost:3000/data',//请求地址method:"get",//请求的方法success:(res)=>{//成功的返回值(注意:这里要用箭头函数要不然无法访问this);console.log("res:",res);//{data: Array(10)....}//修改保存数据的变量this.setData({list:res.data,//list是在data中定义的变量childrenList:res.data[0].children//初始化子数据})}})},

3.进行渲染

<view class="home-box"><View class="home-nav"><block wx:for="{{list}}" wx:key="id"><!-- 利用三运算符做高亮处理 --><!-- bindtap点击事件处理下标 --><!-- data-index将下标传给事件 --><button type="{{tabIndex===index?'primary':'default'}}" size="mini" bindtap="setTabInde" data-index="{{index}}">{{item.title}}</button></block></View><view class="home-list"><!-- 循环渲染子数据 --><block wx:for="{{childrenList}}" wx:key="id"><view class="list-item"><image src="{{item.src}}"></image><text>数量:{{item.num}}</text></view></block></view>
</view>

4.设置tabindex完成切换

//设置tabindex完成切换setTabInde(e){// console.log("e:",e.currentTarget.dataset.index)//找到所点击的下标赋值给tabindex完成高亮//设置高亮以及子数据this.setData({tabIndex:e.currentTarget.dataset.index,//高亮childrenList:this.data.list[e.currentTarget.dataset.index].children//设置子数据})},

效果:

微信小程序tab切换相关推荐

navtab触底小程序_微信小程序TAB切换效果
微信小程序tab切换效果话不多说,先上效果图主要是让在一个WXML上面显示2个页面,用来分页展示东西. 直接上代码了: 首先是wxml {{item}} A页 B页然后是wxcss样式代码 .t ...
微信小程序 tab切换
设置背景颜色就直接在page里设置 page {background-color: rgb(242, 242, 242);} tab切换: navigator 页面链接传参的格式为url=&q ...
微信小程序 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切换内容
wxml: wxss: js: .wxml代码: <view class="body"> <view class="nav bc_white&quo ...
微信小程序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点击 ...
微信小程序动态切换class类名
之前用jquery时我们可以使用: $(".classify").eq(0).addClass("addStyleMi").siblings().removeC ...

微信小程序tab切换

微信小程序tab切换相关推荐

最新文章

热门文章