小程序点击首页模块跳转新页面tab滑动到固定位置

1.全局变量在app.js

  globalData: {

 // 加指定跳转

    currentLocation: '',

    userInfo: null

  }

2.index标题

wxml静态 页面部分

      <view class="middle">

        <view class="tit">垃圾分类</view>

        <view class="list">

          <view class="item bg-blue" bindtap="findRub1">

            <image src="../../img/index/icon5.png"></image>

          </view> 

          <view class="item bg-green" bindtap="findRub2">

            <image src="../../img/index/icon6.png"></image>

          </view> 

          <view class="item bg-gray" bindtap="findRub3">

            <image src="../../img/index/icon7.png"></image>

          </view> 

          <view class="item bg-red" bindtap="findRub4">

            <image src="../../img/index/icon8.png"></image>

          </view>                                     

        </view>

      </view>

wxss样式部分

 .middle{

 width: 100%;

 margin: 40rpx 0 0 0;

}

 .middle .tit{

  font-size: 29rpx;

  color: #000000;

  position: relative;

  padding:25rpx 0 25rpx 55rpx;

  box-sizing: border-box;

}

 .middle .tit::after{

  content: '';

  width: 7rpx;

  height: 28rpx;

  background-color: #458bf3;

  position: absolute;

  top: 30rpx;

  left: 40rpx;

}

.middle .list{

  width: 100%;

  padding: 0 30rpx;

  box-sizing: border-box;

  display: flex;

  justify-content: space-around;

  text-align: center;

}

 .list .item{

  width: 134rpx;

  height: 120rpx;

  border-radius: 20rpx;

  display:flex;

  justify-content:center;

  align-items:center;

}

 .list .item image{

  width: 78rpx;

  height: 83rpx;

}

js部分

// 垃圾分类点击跳转

  findRub1: function () {

    app.globalData.currentLocation = 0,

      console.log(app.globalData.currentLocation);

    wx.navigateTo({ url: '../find/find' })

  },

  findRub2: function () {

    app.globalData.currentLocation = 1,

      console.log(app.globalData.currentLocation);

    wx.navigateTo({ url: '../find/find' })

  },

  findRub3: function () {

    app.globalData.currentLocation = 2,

      console.log(app.globalData.currentLocation);

    wx.navigateTo({ url: '../find/find' })

  },

  findRub4: function () {

    app.globalData.currentLocation = 3,

      console.log(app.globalData.currentLocation);

    wx.navigateTo({ url: '../find/find' })

  },

2.新tab页面

find.wxml

<!--pages/find/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

/* pages/find/find.wxss */

.swiper-tab {

  width: 100%;

  text-align: center;

  line-height: 80rpx;

}

.swiper-tab-list {

  font-size: 30rpx;

  display: inline-block;

  width: 25%;

  color: #000000;

}

.on {

  color: #458bf3;

  border-bottom: 5rpx solid #458bf3;

}

.swiper-box {

  display: block;

  height: 100%;

  width: 100%;

  overflow: hidden;

}

.swiper-box view {

  text-align: center;

}

find.js

// pages/find/find.js

var app = getApp();

Page({

  /**

   * 页面的初始数据

   */

  data: {

    winWidth: 0,

    winHeight: 0,

    // tab切换  

    currentTab: 0,

  },

  /**

   * 生命周期函数--监听页面加载

   */

  onLoad: function (options) {

 // console.log('i='+i);

 var that = this;

 /** 

  * 获取系统信息 

  */

 wx.getSystemInfo({

   success: function (res) {

     that.setData({

       winWidth: res.windowWidth,

       winHeight: res.windowHeight

     });

   }

 });

  },

  /**

   * 生命周期函数--监听页面初次渲染完成

   */

  onReady: function () {

  },

//滑动或点击都触发

  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

      });

    }

  },

  /**

   * 生命周期函数--监听页面隐藏

   */

  onHide: function () {

  },

  /**

   * 生命周期函数--监听页面卸载

   */

  onUnload: function () {

  },

  /**

   * 页面相关事件处理函数--监听用户下拉动作

   */

  onPullDownRefresh: function () {

  },

  /**

   * 页面上拉触底事件的处理函数

   */

  onReachBottom: function () {

  },

  /**

   * 用户点击右上角分享

   */

  onShareAppMessage: function () {

  }

})