微信小程序——点击tabbar里的按钮跳转到另一个tabbar中的内容_按一个键到下一个标注简化小程序

点击首页中的四个按钮，分别跳转到案例中的对应按钮中，并且内容一起显示出来，不说废话，直接上码

实现思路：首先在首页中拿到四个按钮的index，其次将index赋值给案例中对应的index

首页：

html中
 
  <scroll-view class="major" scroll-x style="width: {{majorWidth}}rpx;">
    <view class="box" url="" wx:for="{{nav_imgs}}" wx:key="id" bindtap="nav_click" data-key="{{index}}" style="width: {{boxWidth}}rpx;">
      <image class="pic" src="{{item.src}}" />
      <view class="txt">{{item.txt}}</view>
    </view>
  </scroll-view>
 
//index就是0、1、2、3
 
 
js中
 
 
  data: {
    majorWidth:"",
    boxWidth:"",
    nav_imgs:[
      {src:'/static/scroll-view/Public.png',txt:'aaa'},
      {src:'/static/scroll-view/Applet.png',txt:'bbb'},
      {src:'/static/scroll-view/App.png',txt:'ccc'},
      {src:'/static/scroll-view/Web.png',txt:'ddd'}
    ],
  }
 
 // 传index给案例
   nav_click:function(res){
    // console.log(res.currentTarget.dataset.key);
    var key = res.currentTarget.dataset.key;
    wx.reLaunch({
      url: "/pages/works/works?key="+key  //这个路径是案例的路径
    })
  },
 
 

 案例：

html中
 
 
//导航栏
<view class="switchtap fl">
	<view class="tap fl">
		<view class="item {{tabbar.selected==='0'?'active':''}}" bind:tap="changeTabbar">
			<text class="jx">{{tabbar.list[0].text}}</text>
			<view class="line"></view>
		</view>
		<view class="item {{tabbar.selected==='a'?'active':''}}" bind:tap="changeTabbar">
			<text class="jx">{{tabbar.list[1].text}}</text>
			<view class="line"></view>
		</view>
		<view class="item {{tabbar.selected==='b'?'active':''}}" bind:tap="changeTabbar">
			<text class="jx">{{tabbar.list[2].text}}</text>
			<view class="line"></view>
		</view>
		<view class="item {{tabbar.selected==='c'?'active':''}}" bind:tap="changeTabbar">
			<text class="jx">{{tabbar.list[3].text}}</text>
			<view class="line"></view>
		</view>
		<view class="item {{tabbar.selected==='d'?'active':''}}" bind:tap="changeTabbar">
			<text class="jx">{{tabbar.list[4].text}}</text>
			<view class="line"></view>
		</view>
	</view>
</view>
 
//内容
<swiper class="tab-content" current="{{currentTab}}">
	<swiper-item>
		<scroll-view  scroll-y="true" class="scoll-h" >
				<view class="container">
					我是a内容
				</view>
		</scroll-view>
	</swiper-item>
 
    <swiper-item>
		<scroll-view  scroll-y="true" class="scoll-h" >
				<view class="container">
					我是b内容
				</view>
		</scroll-view>
	</swiper-item>
 
    <swiper-item>
		<scroll-view  scroll-y="true" class="scoll-h" >
				<view class="container">
					我是c内容
				</view>
		</scroll-view>
	</swiper-item>
 
    <swiper-item>
		<scroll-view  scroll-y="true" class="scoll-h" >
				<view class="container">
					我是d内容
				</view>
		</scroll-view>
	</swiper-item>
 
 
</swiper>
 
 
js中
 onLoad: function (options) {
    let that = this;
    //key是首页传过来的，在onload中接收
    var key=options.key;
    //在没传之前currentTab为空“underfind” 重新赋值给currentTab
    if(key==undefined){
      that.setData({
        currentTab:0
      })
    }else{
      //因为一开始key是为0，而在案例中‘a内容’的index是为1，所以依次+1
      key++
      that.setData({
        //赋值给currentTab
        currentTab:key
      })      
    }
  },
 

注：代码只是其中的主要部分，需要全码的伙伴，记得私聊哦，希望可以帮到你们！一起加油