小程序中scroll-view選項卡和他的跳轉（上）

    現(xiàn)在大多數(shù)的商城類小程序都有這個功能磨总，點擊“全部訂單”，“待付款”笼沥，“待發(fā)貨”蚪燕，“待收貨”，“已完成”奔浅，會跳轉頁面且跳至與之相對應的選項卡中馆纳。所以我們在開發(fā)該小程序時也做了相同的功能。如下圖：

4279446-1b0828ca8df9449d.gif

但是我們在最后做交互的時候汹桦，并沒有使用該效果鲁驶，下篇再說這個！先說說這個效果是如何實現(xiàn)的舞骆！

選項卡靜態(tài)布局思路：主要用到scroll-view與swiper標簽钥弯，選項卡切換主要依靠 swiper 中的 current 屬性
跳轉頁面且跳至與之相對應的選項卡思路：
首先在 app.js 中配置 globalData
在“個人中心” js 文件中配置點擊該項跳轉至與之對應的 tab 的 index。
在“個人中心”跳轉頁面時通過 globalData 傳遞 index 給“全部訂單”頁面督禽，“全部訂單”頁面通過 app.globalData.currentLocation 接受數(shù)據(jù)寿羞，改變選項卡的切換。
app.js 代碼

 globalData: {
    userInfo: null
  }

個人中心 wxml 代碼

<!--九宮格  -->
<view class="page">
  <view class="page__bd">
    <view class="weui-grids">
      <view class="allrec" bindtap="allForm">
          <text>我的訂單</text>
          <view class="more">查看更多訂單</view>
          <image class='moreImg' src='../../img/more.png'></image>
      </view>
      <!--待付款  -->
      <view class="weui-grid" hover-class="weui-grid_active" bindtap="noPay">
        <image class="weui-grid__icon" src="../../img/wallet.png" />
        <view class="weui-badge" hidden="{{false}}">{{badgeNum1}}</view>
        <view class="weui-grid__label label">待付款</view>
      </view>

      <!--待發(fā)貨  -->  
      <view class="weui-grid" hover-class="weui-grid_active" bindtap="noSend">
        <image class="weui-grid__icon" src="../../img/wallet-1.png" />
        <view class="weui-badge" hidden="{{false}}">{{badgeNum1}}</view>
        <view class="weui-grid__label label">待發(fā)貨</view>
      </view>

      <!--已發(fā)貨  -->
      <view class="weui-grid" hover-class="weui-grid_active" bindtap="sended">
        <image class="weui-grid__icon" src="../../img/wallet-2.png" />
        <view class="weui-badge" hidden="{{false}}">{{badgeNum1}}</view>
        <view class="weui-grid__label label">待收貨</view>
      </view>

      <!--已完成  -->
      <view class="weui-grid" hover-class="weui-grid_active" bindtap="completed">
        <image class="weui-grid__icon" src="../../img/wallet-3.png" />
        <view class="weui-grid__label label">已完成</view>
      </view>
    </view>
  </view>
</view>

個人中心 js 代碼

var app = getApp()
var util = require('../../utils/util.js')
var formatLocation = util.formatLocation

Page({
  data: {
  },
  // 指定 全部訂單 和 九宮格中按鈕 點擊跳轉至 選項卡中 與之對應的tab
  allForm:function(){
    app.globalData.currentLocation = 0,
    wx.navigateTo({ url: '../orderForm/orderForm' }) 
  },
  noPay:function(){
    app.globalData.currentLocation = 1,
    wx.navigateTo({ url: '../orderForm/orderForm' })  
  },
  noSend:function(){
    app.globalData.currentLocation = 2,
    wx.navigateTo({ url: '../orderForm/orderForm' }) 
  },
  sended:function(){
    app.globalData.currentLocation = 3,
    wx.navigateTo({ url: '../orderForm/orderForm' }) 
  },
  completed:function(){
    app.globalData.currentLocation = 4,
    wx.navigateTo({ url: '../orderForm/orderForm' }) 
  }
})

個人中心 wxss 代碼

/*九宮格  */
.weui-grids{
  border-left: none;
}
.weui-grid{
  width: 25%;
  border: none;
  position: relative;
  padding:20px 10px 10px;
}
.weui-grid .weui-badge{
width: 12rpx;
height: 28rpx;
border-radius: 50%;
  position: absolute;
  right: 40rpx;
  top: 20rpx;
  background: #df0202;
}


/* list  */
.weui-cell__hd{
  margin-right: 30rpx;
  vertical-align: middle;
  width:20px;
  height: 20px;
}
.weui-cell__hd image{
  width: 50rpx;
  height: 50rpx;
}
.weui-cell__ft{
  color: #fff;
  background: #dd3838;
  border-radius: 20rpx;
  text-align: center;
  margin-right: 10rpx;
  padding: 0 5rpx;
}
.all{
    font-size: 30rpx;
}

全部訂單 wxml 代碼

<!--全部訂單頁  -->
  <!--選項卡標題  -->

<scroll-view scroll-x="true" bindscroll="scroll" class="scroll-view_H list-liu">
  <view class="scroll-view-item_H swiper-tab-list {{currentTab==0?'on':''}}" data-current="0" bindtap="swichNav" hover-class="eee">全部</view>
  <view class="scroll-view-item_H swiper-tab-list {{currentTab==1?'on':''}}" data-current="1" bindtap="swichNav" hover-class="eee">待付款</view>
  <view class="scroll-view-item_H swiper-tab-list {{currentTab==2?'on':''}}" data-current="2" bindtap="swichNav" hover-class="eee">待發(fā)貨</view>
  <view class="scroll-view-item_H swiper-tab-list {{currentTab==3?'on':''}}" data-current="3" bindtap="swichNav" hover-class="eee">已發(fā)貨</view>
  <view class="scroll-view-item_H swiper-tab-list {{currentTab==4?'on':''}}" data-current="4" bindtap="swichNav" hover-class="eee">已完成</view>
</scroll-view>
  
<!-- 選項卡內(nèi)容 -->
<swiper current="{{currentTab}}" class="swiper-box" duration="300" bindchange="bindChange" style="height:{{clientHeight?clientHeight+'px':'auto'}}">  
    <!-- 全部訂單 內(nèi)容 --> 
  <swiper-item>  
    <scroll-view scroll-y="{{true}}" style="height: {{clientHeight?clientHeight+'px':'auto'}}">
      <view class="kong"></view>
      <!--寫入顯示內(nèi)容  -->
      <view class="list" wx:for="{{carts}}" wx:key="*this">
        <!-- 圖片 -->
        <view class="pic">
          <image src="{{item.imgurl}}"></image>
        </view>
        <!-- 類型表述 -->
        <view class="con">
          <text class="type1">{{item.type1}}</text>
          <text class="type2">{{item.type2}}</text>
        </view>
        <!-- 價格 -->
        <view class="price">
          <text class="price1">￥{{item.price}}</text>
          <text class="number">×{{item.num}}</text>
        </view>
      </view>
    </scroll-view>
  </swiper-item>  
    <!-- 待付款 內(nèi)容 --> 
  <swiper-item>  
    <scroll-view scroll-y="{{true}}" style="height: {{clientHeight?clientHeight+'px':'auto'}}">
      <view class="kong"></view>
      <!--寫入顯示內(nèi)容  -->
      <view class="list" wx:for="{{carts}}" wx:key="*this">
        <!-- 圖片 -->
        <view class="pic">
          <image src="{{item.imgurl}}"></image>
        </view>
        <!-- 類型表述 -->
        <view class="con">
          <text class="type1">{{item.type1}}</text>
          <text class="type2">{{item.type2}}</text>
        </view>
        <!-- 價格 -->
        <view class="price">
          <text class="price1">￥{{item.price}}</text>
          <text class="number">×{{item.num}}</text>
        </view>
      </view>
    </scroll-view>
  </swiper-item>  
    <!-- 待發(fā)貨 內(nèi)容 -->
  <swiper-item>  
    <scroll-view scroll-y="{{true}}" style="height: {{clientHeight?clientHeight+'px':'auto'}}">
      <view class="kong"></view>
      <!--寫入顯示內(nèi)容  -->
      
      <view class="list" wx:for="{{carts}}" wx:key="*this">
        <!-- 圖片 -->
        <view class="pic">
          <image src="{{item.imgurl}}"></image>
        </view>
        <!-- 類型表述 -->
        <view class="con">
          <text class="type1">{{item.type1}}</text>
          <text class="type2">{{item.type2}}</text>
        </view>
        <!-- 價格 -->
        <view class="price">
          <text class="price1">￥{{item.price}}</text>
          <text class="number">×{{item.num}}</text>
        </view>
      </view>
    </scroll-view>
  </swiper-item>  
    <!-- 已發(fā)貨 內(nèi)容 -->
  <swiper-item>  
    <scroll-view scroll-y="{{true}}" style="height: {{clientHeight?clientHeight+'px':'auto'}}">
      <view class="kong"></view>
      <!--寫入顯示內(nèi)容  -->
      <view class="list" wx:for="{{carts}}" wx:key="*this">
        <!-- 圖片 -->
        <view class="pic">
          <image src="{{item.imgurl}}"></image>
        </view>
        <!-- 類型表述 -->
        <view class="con">
          <text class="type1">{{item.type1}}</text>
          <text class="type2">{{item.type2}}</text>
        </view>
        <!-- 價格 -->
        <view class="price">
          <text class="price1">￥{{item.price}}</text>
          <text class="number">×{{item.num}}</text>
        </view>
      </view>
    </scroll-view>
  </swiper-item> 
    <!-- 已完成 內(nèi)容 -->
  <swiper-item>  
    <scroll-view scroll-y="{{true}}" style="height: {{clientHeight?clientHeight+'px':'auto'}}">
      <view class="kong"></view>
      <!--寫入顯示內(nèi)容  -->
      <view class="list" wx:for="{{carts}}" wx:key="*this">
        <!-- 圖片 -->
        <view class="pic">
          <image src="{{item.imgurl}}"></image>
        </view>
        <!-- 類型表述 -->
        <view class="con">
          <text class="type1">{{item.type1}}</text>
          <text class="type2">{{item.type2}}</text>
        </view>
        <!-- 價格 -->
        <view class="price">
          <text class="price1">￥{{item.price}}</text>
          <text class="number">×{{item.num}}</text>
        </view>
      </view>
    </scroll-view>
  </swiper-item> 
</swiper>

全部訂單 js 代碼

// 全部訂單頁

//獲取應用實例
var app = getApp()
Page({
  /*** 頁面的初始數(shù)據(jù) */
  data: {
    // 選項卡
    winWidth: 0,
    winHeight: 0,
    // tab切換  
    currentTab: 0, 
    // 商品內(nèi)容數(shù)據(jù)
    carts: [
      { imgurl: '../../img/fen-2.jpg', type1: '【老酒特賣】45℃老白汾十年陳釀500ML(2008-2009)', type2: '清香型', price: 100, num: 1 }, 
      { imgurl: '../../img/fen-1.jpg', type1: '【老酒特賣】45℃老白汾十年陳釀500ML(2008-2009)', type2: '清香型', price: 100, num: 1 },
      { imgurl: '../../img/fen-2.jpg', type1: '【老酒特賣】45℃老白汾十年陳釀500ML(2008-2009)', type2: '清香型', price: 100, num: 1 },
      { imgurl: '../../img/fen-1.jpg', type1: '【老酒特賣】45℃老白汾十年陳釀500ML(2008-2009)', type2: '清香型', price: 100, num: 1 },
    ],
  },
  /** * 滑動切換tab  */
  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
      })
    }
  },
  /*** 生命周期函數(shù)--監(jiān)聽頁面加載*/
  onLoad: function (options) {
    var that = this;
    /** * 獲取系統(tǒng)信息  */
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          clientHeight: res.windowHeight
        });
      }
    });
  },
  /*** 生命周期函數(shù)--監(jiān)聽頁面顯示*/
  onShow: function () {
    if (app.globalData.currentLocation == '') {
      this.setData({
        currentTab: 0
      });
    } else {
      var i = app.globalData.currentLocation;
      this.setData({
        currentTab: i
      });
    }
  }
})

全部訂單 wxss 代碼

.scroll-view_H{
  white-space: nowrap;
}
.scroll-view-item_H{
  display: inline-block;
  width: 20%;
  box-sizing: border-box;
}
.list-liu{
  width: 100%;
  height: 85rpx;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1;
  background: #fff;
  border: 1rpx solid #eee;
}
.on{
  color: #c80611;
}
.list-liu .swiper-tab-list{
  text-align: center;
  line-height: 85rpx;
  font-size: 34rpx;
}
.kong{
  width: 100%;
  height: 85rpx;
}
/*----------------------分割線-------------------  */
/*購物車 全部訂單 我的收藏 瀏覽記錄 樣式  */
/* 列表 */
.list{width: 100%;background: #fff;margin-top:20rpx;display: flex;box-sizing: border-box;padding:10rpx 30rpx 10rpx 30rpx ;border-bottom: 1px solid #eee}
.carts-radio{flex: 1;line-height: 180rpx;text-align: center}/* 選項框 */
.pic{flex: 3;height: 180rpx;}
.pic image{width: 100%;height: 100%;}
.con{flex: 6;padding-left: 20rpx;padding-bottom: 20rpx;box-sizing: border-box}
view,text,block{
    font-family: "Microsoft Yahei"
}
/* 類型描述 */
.type1{
  padding-top: 10rpx;
  display: block;
  font-size: 30rpx;
  color: #323232;
  width:100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient: vertical;
}
 .type2{
   display: flex;
  font-size: 28rpx;
  color: #666;
  width:100%;
  padding-top: 20rpx;box-sizing: border-box
}


/* 數(shù)量 */
.num{
  width: 140rpx;
  height: 40rpx;
  border: 1px solid #eee;
  margin-top: 15rpx;
  background: #fff
} 
.num2{
  float: left;
  width: 56rpx;
  line-height: 40rpx;
  text-align: center;
 font-size: 28rpx;
 color: #666666
}
.num1{float: left;
width: 40rpx;
height: 40rpx;
line-height: 40rpx;
text-align: center;
font-size: 36rpx;
padding: 0;
color: #4a4949;
border-right: 1px solid #eee;
}
.num3{
float: right;
width: 40rpx;
height: 40rpx;
line-height: 40rpx;
text-align: center;
font-size: 36rpx;
padding: 0;
margin: 0;
border-radius: 0px;
color: #4a4949;
border-left: 1px solid #eee;
} 

/* 價格 */
.price{flex: 3;font-size: 30rpx;color: #c90211;box-sizing: border-box;position: relative}
 .price1{position: absolute;right: 0;top: 0}
 .number{position: absolute;right: 0;top: 40rpx}

/* 刪除 */
.del{width: 50rpx;height: 50rpx;position: absolute;right: 0;bottom: 20rpx}

/*----------------------分割線-------------------  */
/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
} 
/*----------------------分割線-------------------  */
/*首頁商品類樣式  */
.content{
  display: flex;
  flex-wrap:  wrap;
}
.content-1{
  width: 375rpx;
  /* height: 420rpx; */
  padding:20rpx 10rpx ;
  box-sizing: border-box;
  border-bottom: 2rpx solid #cccccc;
  border-right: 1rpx solid #cccccc;
}
.content-1 image{
  width: 374rpx;
  height: 252rpx;
  margin-left: -8rpx;
}
.content-1 .price .text-price{
  color: #b20000;
  font-size: 32rpx;
  font-weight: bold;
}
.content-1 .price .text-yj{
  color: #656565;
  font-size: 24rpx;
}
.content-1 .price .text-oldprice{
  text-decoration: line-through;
  color: #656565;
  font-size: 24rpx;
}
.content-1 .name .text-name{
  font-size: 28rpx;
  color: #323232;
}
.content-1 .dress{
  margin-top: 10rpx;
}
.content-1 .dress .dress-1{
  float: left;
  color: #989898;
  font-size: 24rpx;
}
.content-1 .dress .dress-2{
  float: right;
  color: #989898;
  font-size: 24rpx;
  margin-right: 20rpx;
}

下篇為大家說明為何最后做交互的時候赂蠢，并沒有使用該效果绪穆。
大家有什么建議或者不懂的問題歡迎評論。

?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末虱岂，一起剝皮案震驚了整個濱河市玖院，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌第岖，老刑警劉巖难菌，帶你破解...
沈念sama閱讀 217,657評論 6贊 505
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異蔑滓，居然都是意外死亡郊酒，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 92,889評論 3贊 394
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門键袱，熙熙樓的掌柜王于貴愁眉苦臉地迎上來燎窘，“玉大人，你說我怎么就攤上這事蹄咖『纸。” “怎么了？”我有些...
開封第一講書人閱讀 164,057評論 0贊 354
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵澜汤，是天一觀的道長蚜迅。經(jīng)常有香客問我舵匾，道長，這世上最難降的妖魔是什么谁不？我笑而不...
開封第一講書人閱讀 58,509評論 1贊 293
?港島之戀（遺憾婚禮）
正文為了忘掉前任坐梯，我火速辦了婚禮，結果婚禮上刹帕，老公的妹妹穿的比我還像新娘烛缔。我一直安慰自己，他們只是感情好轩拨，可當我...
茶點故事閱讀 67,562評論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布践瓷。她就那樣靜靜地躺著，像睡著了一般亡蓉。火紅的嫁衣襯著肌膚如雪晕翠。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 51,443評論 1贊 302
城市分裂傳說
那天砍濒，我揣著相機與錄音淋肾，去河邊找鬼。笑死爸邢，一個胖子當著我的面吹牛樊卓，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播杠河，決...
沈念sama閱讀 40,251評論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼碌尔，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了券敌？” 一聲冷哼從身側響起唾戚，我...
開封第一講書人閱讀 39,129評論 0贊 276
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎待诅，沒想到半個月后叹坦，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 45,561評論 1贊 314
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡卑雁，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 37,779評論 3贊 335
?白月光啟示錄
正文我和宋清朗相戀三年募书，在試婚紗的時候發(fā)現(xiàn)自己被綠了。大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片测蹲。...
茶點故事閱讀 39,902評論 1贊 348
活死人
序言：一個原本活蹦亂跳的男人離奇死亡莹捡，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出弛房，到底是詐尸還是另有隱情道盏，我是刑警寧澤而柑，帶...
沈念sama閱讀 35,621評論 5贊 345
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布荷逞，位于F島的核電站，受9級特大地震影響粹排，放射性物質發(fā)生泄漏种远。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點故事閱讀 41,220評論 3贊 328
男人毒藥：我在死后第九天來索命
文/蒙蒙一顽耳、第九天我趴在偏房一處隱蔽的房頂上張望坠敷。院中可真熱鬧，春花似錦射富、人聲如沸膝迎。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,838評論 0贊 22
一樁弒父案胰耗，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽限次。三九已至，卻和暖如春柴灯，著一層夾襖步出監(jiān)牢的瞬間卖漫，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 32,971評論 1贊 269
情欲美人皮
我被黑心中介騙來泰國打工赠群，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留羊始，地道東北人。一個月前我還...
沈念sama閱讀 48,025評論 2贊 370
代替公主和親
正文我出身青樓查描，卻偏偏與公主長得像突委，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子冬三，可洞房花燭夜當晚...
茶點故事閱讀 44,843評論 2贊 354

小程序中scroll-view選項卡和他的跳轉（上）

推薦閱讀更多精彩內(nèi)容