小程序引入的是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
})
})
}
)}