微信小程序 - tab标签页通过点击事件获取索引加载相关数据

最新推荐文章于 2024-05-29 18:26:19 发布

耶斯莫鱼拉

最新推荐文章于 2024-05-29 18:26:19 发布

阅读量1.1k

点赞数

分类专栏：微信小程序 JS 文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/weixin_59533746/article/details/132366755

版权

微信小程序同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

3 篇文章 0 订阅

订阅专栏

本文介绍了如何在微信小程序中使用VantWeapp的tab标签页组件，并详细讲解了如何在wxml和js文件中定义点击事件、获取标签索引和ID，以及调用相关API获取产品列表的过程。

摘要由CSDN通过智能技术生成

小程序引入的是Vant Weapp第三方组件库当中的tab 标签页

一、在 wxml 文件中 van-tabs 标签上用bind:click=" "定义点击事件名称

<view class="nav">
	<van-tabs active="{{ navactive }}" bind:click="navchange">
		<van-tab title="标签1" ></van-tab>
	</van-tabs>
</view>

二、在对应页面的 js 文件中 onLoad事件下方定义一个事件，通过点击标签的索引，反推获得标签的id

注意：这个事件名称与 bind:click=" "引号中的名称一样

navchange(e){
console.log(e);
let index=e.detail.index //定义变量并获取索引值
navid=this.data.navArr[index]._id //通过索引值反推标签id
this.getproductlist();
},

三、完整的代码片段

import { listnav ,productlist} from "../../api/nav_product"//引入自定义的方法
let navid;//全局定义变量
Page({
  //页面的初始数据
  data: {
    navactive:"",
    navArr:[],
    proARR:[]
  },
  //生命周期函数--监听页面加载
  onLoad(options) {
this.getclassfynavlist();
this.getproductlist()
  },
//获取分类导航
getclassfynavlist(){
  listnav().then(res=>{
console.log(res.data);
this.setData({
navArr:res.data
})
  })
},
//切换导航
navchange(e){
console.log(e);
let index=e.detail.index
navid=this.data.navArr[index]._id
console.log(navid);
this.getproductlist();
},

//获取产品列表
getproductlist(){
  productlist({
    navid:navid
  }).then(res=>{
console.log(res);
this.setData({
  proARR:res.data
})
  })
}
)}