关闭

微信小程序-页面跳转到对应的顶部tab

标签: 小程序tab微信页面跳转指定tab
435人阅读 评论(0) 收藏 举报
分类:

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 () {

  },
  }
})
嗯,到这应该完成。

0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

微信小程序实例:跳转到顶部实例

总所周知,小程序不能操作dom,那么我们要怎么实现在页面滚动到一定条件的时候,显示gotop图标,点击后跳转到页面的顶部呢?       这里小程序有个组件是可以实现的,那就是scroll-view组...
  • eadio
  • eadio
  • 2016-11-16 19:56
  • 10327

微信小程序开发之选项卡(窗口顶部TabBar)页面切换

微信小程序开发中选项卡.在android中选项卡一般用fragment,到了小程序这里瞬间懵逼了. 总算做出来了.分享出来看看. 先看效果: 再上代码: 1.index.wxml 哈哈...
  • qq_31383345
  • qq_31383345
  • 2016-10-23 11:53
  • 39785

小程序tabbar跳转

作者:七月在夏天 链接:https://zhuanlan.zhihu.com/p/24495203 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 昨天朋...
  • a1943206465
  • a1943206465
  • 2017-01-20 14:51
  • 4816

微信小程序开发之选项卡(窗口顶部TabBar)页面切换

微信小程序开发中选项卡.在Android中选项卡一般用fragment,到了小程序这里瞬间懵逼了. 总算做出来了.分享出来看看. 先看效果: 再上代码: 1.ind...
  • sinat_17775997
  • sinat_17775997
  • 2016-12-12 17:21
  • 1899

微信小程序之页面的跳转

从一个页面跳转到下一个页面 小程序提供了方法 wx.navigateTo(OBJECT) 保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。 OBJECT 参数...
  • wangxinxu521
  • wangxinxu521
  • 2017-02-28 15:21
  • 673

微信小程序底部导航加顶部table选项卡

本来一直做JAVA+HTML5开发,最近微信小程序比较火,就想研究研究一下,结果花了两天时间研究发现微信小程序的三层架构比较不错,数据动态绑定也比较好用,但是和传统开发相比,开始还是有些不太习惯,特别...
  • luo359769412
  • luo359769412
  • 2017-02-20 16:00
  • 727

微信小程序——-会滑动的顶部tab选项卡

微信小程序——-会滑动的顶部tab选项卡不废话直接进入主题test.wxml <view class="tab-vi
  • MoDingXiao
  • MoDingXiao
  • 2017-01-23 16:50
  • 1861

android app跳转到微信

android app跳转到微信
  • kongTy
  • kongTy
  • 2017-12-12 13:48
  • 101

微信小程序(四):Tab分页

本文介绍在微信小程序中实现多Tab分页的功能。内容多出自官方文档,增加了一些作者实践过程中遇到的问题与注意点。
  • u010635353
  • u010635353
  • 2016-11-14 11:05
  • 6399

微信小程序创建之获取地理位置并跳转腾讯地图

微信小程序创建 1、服务器域名配置 登录微信公众平台小程序,首先配置服务器域名。 本实例的域名在腾讯云购买 点击修改可前往腾讯云购买,购买后会自动配置。 2、微信小程序开发 下载开发者...
  • ghy_gong
  • ghy_gong
  • 2017-07-12 17:07
  • 2281
    个人资料
    • 访问:4228次
    • 积分:352
    • 等级:
    • 排名:千里之外
    • 原创:31篇
    • 转载:5篇
    • 译文:0篇
    • 评论:0条