微信小程序-頁面跳轉到對應的頂部tab

原創 会飞的蜗牛905 2020-06-20 21:31

hello，首先，我是一個菜鳥，不足之處指點批評！

需求：我需要在index頁面點擊一個按鈕跳轉到另一個頁面（是一個底部tab）的頂部tab的特定某個選項卡。額，沒說清楚，看圖展示：

當我點擊裝飾公司進入 裝飾公司的tab。 index頁面跳轉至 find頁面。

思路：在app.js設置變量，通過點擊按鈕設置變量的值，然後在find.js獲取變量值，判斷是誰點擊而做出相應的動作。

話不多說，上代碼 ：

首先設置 app.js的全局變量

 globalData:{
    currentLocation: '',
    userInfo:null
  }


index.wxml

<view class="middle1">
    <view class="middle1-1">
    <!--<navigator url="../buy/buy">-->
      <view class="middle1-1-1" bindtap="view1">
        <view class="middle1-1-1-1">
          <view class="m1">建材店</view>
          <view class="m2">買建材不繞路</view>
        </view>
        <view class="middle1-1-1-2">
          <image class="m3" src="resources/m1.png"></image>
        </view>
      </view>
      <!--</navigator>-->
      <view class="middle1-1-2" bindtap="view2">
        <view class="middle1-1-2-1">
          <view class="m4">裝飾公司</view>
          <view class="m5">省心省力之選</view>
        </view>
        <view class="middle1-1-2-2">
          <image class="m6" src="resources/m2.png"></image>
        </view>
      </view>
    </view>
    <view class="middle1-2">
      <view class="middle1-2-1" bindtap="view3">
        <view class="middle1-2-1-1">
          <view class="m7">設計師</view>
          <view class="m8">開工先請個設技師</view>
        </view>
        <view class="middle1-2-1-2">
          <image class="c1" src="resources/m3.png"></image>
        </view>
      </view>
      <view class="middle1-2-2" bindtap="view4">
        <view class="middle1-2-2-1">
          <view class="m7">裝修工</view>
          <view class="m8">找工人有保障</view>

        </view>
        <view class="middle1-2-2-2">
          <image class="c1" src="resources/m4.png"></image>
        </view>
      </view>
      <view class="middle1-2-3" bindtap="view5">
        <view class="middle1-2-3-1">
          <view class="m7">運輸工</view>
          <view class="m8">同城送貨不難找</view>

        </view>
        <view class="middle1-2-3-2">
          <image class="c1" src="resources/m5.png"></image>
        </view>
      </view>
    </view>
  </view>
index.wxss: 

.middle1 {
  width: 100%;
  height: 400rpx;
  background: black;
  display: flex;
}

.middle1-1 {
  width: 50%;
  height: 100%;
  background: white;
}

.middle1-1-1 {
  width: 100%;
  height: 50%;
  background: white;
  display: flex;
  border: 0.1px solid #ccced0;
  margin-bottom: -1px;
  margin-left: -1px;
  margin-top: -1px;
}

.middle1-1-1-1 {
  width: 50%;
  height: 100%;
}

.m1 {
  width: 100%;
  height: 50rpx;
  background: white;
  margin-top: 65rpx;
  padding-left: 15rpx;
}

.m2 {
  width: 100%;
  font-size: 28rpx;
  height: 50rpx;
  background: white;
  padding-left: 15rpx;
}

.middle1-1-1-2 {
  width: 50%;
  height: 100%;
}

.m3 {
  width: 130rpx;
  height: 130rpx;
  margin-left: 15rpx;
  margin-top: 15rpx;
}

.middle1-1-2 {
  width: 100%;
  height: 50%;
  display: flex;
  border: 0.1px solid #ccced0;
  margin-left: -1px;
  margin-bottom: -1px;
}

.middle1-1-2-1 {
  width: 50%;
  height: 100%;
}

.m4 {
  height: 50rpx;
  background: white;
  padding-left: 15rpx;
  padding-top: 60rpx;
}

.m5 {
  font-size: 28rpx;
  height: 50rpx;
  background: white;
  padding-left: 15rpx;
}

.middle1-1-2-2 {
  width: 50%;
  height: 100%;
}

.m6 {
  width: 130rpx;
  height: 130rpx;
  margin-left: 15rpx;
  margin-top: 30rpx;
}

.middle1-2 {
  width: 50%;
  height: 100%;
  background: white;
}

.middle1-2-1 {
  border: 0.1px solid #ccced0;
  width: 100%;
  height: 33.1%;
  display: flex;
  margin-bottom: -1px;
  margin-top: -1px;
}

.middle1-2-1-1 {
  width: 60%;
  height: 100%;
}

.m7 {
  width: 100%;
  height: 50rpx;
  background: white;
  margin-top: 17rpx;
  margin-left: 10rpx;
}

.m8 {
  width: 100%;
  height: 50rpx;
  background: white;
  font-size: 28rpx;
  margin-left: 10rpx;
}

.middle1-2-1-2 {
  width: 40%;
  height: 100%;
}

.c1 {
  width: 100rpx;
  height: 100rpx;
  margin-top: 15rpx;
  margin-left: 5rpx;
}

.middle1-2-2 {
  width: 100%;
  height: 33.1%;
  display: flex;
  border: 0.1px solid #ccced0;
  margin-bottom: -1px;
}

.middle1-2-2-1 {
  width: 60%;
  height: 100%;
}

.middle1-2-2-2 {
  width: 40%;
  height: 100%;
}

.middle1-2-3 {
  width: 100%;
  height: 33.1%;
  display: flex;
  border: 1px solid #ccced0;
  margin-bottom: -1px;
}

.middle1-2-3-1 {
  width: 60%;
  height: 100%;
}

.middle1-2-3-2 {
  width: 40%;
  height: 100%;
}
index.js 其實就是對不同的按鈕設置不同的全局變量 

 view2: function () {
    app.globalData.currentLocation = 1,
      console.log(app.globalData.currentLocation);
    wx.switchTab({ url: '../find/find' })
  },
  view3: function () {
    app.globalData.currentLocation = 3,
      console.log(app.globalData.currentLocation);
    wx.switchTab({ url: '../find/find' })
  },
  view4: function () {
    app.globalData.currentLocation = 0,
      console.log(app.globalData.currentLocation);
    wx.switchTab({ url: '../find/find' })
  },
  view5: function () {
    app.globalData.currentLocation = 2,
      console.log(app.globalData.currentLocation);
    wx.switchTab({ url: '../find/find' })
  }

在find 頁面先實現tab頂部選項卡

find.wxml

<view class="swiper-tab">
  <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">裝修工</view>
  <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">裝飾公司</view>
  <view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">運輸工</view>
  <view class="swiper-tab-list {{currentTab==3 ? 'on' : ''}}" data-current="3" bindtap="swichNav">設計師</view>
</view>
<swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange">
  <swiper-item>
          裝修工
  </swiper-item>
  <swiper-item>
    <view>裝飾公司</view>
  </swiper-item>
  <swiper-item>
    <view>運輸工</view>
  </swiper-item>
  <swiper-item>
    <view>設計師</view>
  </swiper-item>
</swiper>


find.wxss：

.swiper-tab {
  width: 100%;
  border-bottom: 2rpx solid #777;
  text-align: center;
  line-height: 80rpx;
}

.swiper-tab-list {
  font-size: 30rpx;
  display: inline-block;
  width: 25%;
  color: #777;
}

.on {
  color: #da7c0c;
  border-bottom: 5rpx solid #da7c0c;
}

.swiper-box {
  display: block;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.swiper-box view {
  text-align: center;
}

find.js

// find.js
var app = getApp();
Page({

  /**
   * 頁面的初始數據
   */
  data: {
    winWidth: 0,
    winHeight: 0,
    // tab切換  
    currentTab: 0,
    city: '南昌市',
  },
  /**
   * 生命週期函數--監聽頁面加載
   */
  onLoad: function (options) {

    // console.log('i='+i);
    var that = this;

    /** 
     * 獲取系統信息 
     */

    wx.getSystemInfo({

      success: function (res) {
        that.setData({
          winWidth: res.windowWidth,
          winHeight: res.windowHeight
        });
      }

    });
  },


 //滑動或點擊都觸發
  bindChange: function (e) {
    var that = this;
    that.setData({ currentTab: e.detail.current });

  },
  /** 
   * 點擊tab切換 
   */
  swichNav: function (e) {
    var that = this;

    if (this.data.currentTab === e.target.dataset.current) {
      return false;
    } else {
      that.setData({
        currentTab: e.target.dataset.current
      })
    }
  },
  /**
   * 生命週期函數--監聽頁面顯示
   */
  onShow: function () {
    if (app.globalData.currentLocation == '') {
      this.setData({
        currentTab: 0
      });
    } else {
      var i = app.globalData.currentLocation;
      console.log('onshow');
      console.log('i=' + i);

      this.setData({
        currentTab: i
      });
    }
  },
  /**
   * 生命週期函數--監聽頁面初次渲染完成
   */
  onReady: function () {

  },
  /**
   * 生命週期函數--監聽頁面隱藏
   */
  onHide: function () {

  },

  /**
   * 生命週期函數--監聽頁面卸載
   */
  onUnload: function () {

  },

  /**
   * 頁面相關事件處理函數--監聽用戶下拉動作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom: function () {

  },

  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function () {

  },
  }
})
嗯，到這應該完成。

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

微信小程序-彈出自定義對話框

最近，需要在小程序裏做一個彈出對話框的操作，微信提供的 showmodal 也達不到我想要的效果，於是自己嘗試。。。 如圖： 大神看了莫噴，希望能幫助到剛入門的小夥伴。。。 代碼 ： wxml： <view class="title">

会飞的蜗牛905 2020-06-20 15:31:19

小程序學習-環境

会飞的蜗牛905 2020-02-22 23:20:01

微信小程序-彈出自定義對話框

最近，需要在小程序裏做一個彈出對話框的操作，微信提供的 showmodal 也達不到我想要的效果，於是自己嘗試。。。 如圖： 大神看了莫噴，希望能幫助到剛入門的小夥伴。。。 代碼 ： wxml： <view class="title">

会飞的蜗牛905 2020-06-20 15:31:19

小程序學習-環境

会飞的蜗牛905 2020-02-22 23:20:01

微信小程序上傳圖片+java 後端接收實例

会飞的蜗牛905 2018-09-02 10:03:26