微信小程式-06 tab選項卡滑動切換與列表Item（scroll 、 swiper）資料的獲取等所用到的都有了

阿新 • • 發佈：2018-11-13

示例圖片

WXML

<view >
    <scroll-view scroll-x="true" class="tab-h" scroll-left="{{scrollLeft}}">
        <view class="tab-item {{currentTab==0?'active':''}}"  data-current="0" bindtap="swichNav">健康</view>
        <view class="tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="swichNav">情感</view>
        <view class="tab-item {{currentTab==2?'active':''}}" data-current="2" bindtap="swichNav">職場</view>
        <view class="tab-item {{currentTab==3?'active':''}}" data-current="3" bindtap="swichNav">育兒</view>
        <view class="tab-item {{currentTab==4?'active':''}}" data-current="4" bindtap="swichNav">糾紛</view>
        <view class="tab-item {{currentTab==5?'active':''}}" data-current="5" bindtap="swichNav">青蔥</view>
        <view class="tab-item {{currentTab==6?'active':''}}" data-current="6" bindtap="swichNav">全部</view>
        <view class="tab-item {{currentTab==7?'active':''}}" data-current="7" bindtap="swichNav">其他</view>
    </scroll-view>
    <swiper class="tab-content" current="{{currentTab}}" duration="300" bindchange="switchTab"
     style="height:{{winHeight}}rpx">
        <swiper-item wx:for="{{[0,1,2,3,4,5,6,7]}}">
            <scroll-view scroll-y="true" class="scoll-h" >
                <block wx:for="{{expertList}}" wx:key="*this">
                    <view class="item-ans">
                        <view class="avatar">
                            <image class="img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537520335665&di=533d913bd1587331b62b0c3f381adec5&imgtype=0&src=http%3A%2F%2Fpic31.nipic.com%2F20130731%2F7331048_094333540110_2.png"></image>
                        </view>
                        <view class="expertInfo">
                            <view class="name">{{expertList[index].name}}</view>
                            <view class="tag">{{expertList[index].tag}}</view>
                            <view class="answerHistory">{{expertList[index].answer}}個回答，{{expertList[index].listen}}人聽過 </view>
                        </view>
                         <!--   data-index='{{index}}'用於js獲取點選的第幾項 index -->
                        <button bindtap='info' data-index='{{index}}' class="askBtn">資訊</button>
                    </view>
                </block>
            </scroll-view>
        </swiper-item>
    </swiper>
</view>

js

//假資料有點多。寫的很詳細。很囉嗦

//e.detail.current現在是在哪一個選項卡里面

//that.data.expertList[e.currentTarget.dataset.index].name 資料的獲取、獲取點選了哪個“資訊”按鈕輸出所對應的name

var app = getApp();
Page({
  data: {
    winHeight: "", //視窗高度
    currentTab: 0, //預設當前項的值
    scrollLeft: 0, //tab標題的滾動條位置
    expertList: [{ //假資料
      img: "avatar.png",
      name: "健康1",
      tag: "過去過不去都會過去",
      answer: 134,
      listen: 2234
    },
    { //假資料
      img: "avatar.png",
      name: "分分2",
      tag: "過去過不去都會過去",
      answer: 134,
      listen: 2234
    },
    { //假資料
      img: "avatar.png",
      name: "挖方3",
      tag: "過去過不去都會過去",
      answer: 134,
      listen: 2234
    },
    { //假資料
      img: "avatar.png",
      name: "哥ere4",
      tag: "過去過不去都會過去",
      answer: 134,
      listen: 2234
    },
    { //假資料
      img: "avatar.png",
      name: "阿迪王5",
      tag: "過去過不去都會過去",
      answer: 134,
      listen: 2234
    },
    { //假資料
      img: "avatar.png",
      name: "啊打發6",
      tag: "過去過不去都會過去",
      answer: 134,
      listen: 2234
    },
    { //假資料
      img: "avatar.png",
      name: "咖妃7",
      tag: "過去過不去都會過去",
      answer: 134,
      listen: 2234
    },
    ]
  },
  // 滾動切換標籤樣式
  switchTab: function(e) {
    console.log(e.detail)
//e.detail.current現在是在哪一個選項卡里面 
    switch (e.detail.current) {
      case 0:
          this.setData({
          currentTab: e.detail.current,
          expertList: [{ //假資料
            img: "avatar.png",
            name: "健康1",
            tag: "過去過不去都會過去",
            answer: 134,
            listen: 2234
          },
          { //假資料
            img: "avatar.png",
            name: "分分2",
            tag: "過去過不去都會過去",
            answer: 134,
            listen: 2234
          },
          { //假資料
            img: "avatar.png",
            name: "挖方3",
            tag: "過去過不去都會過去",
            answer: 134,
            listen: 2234
          },
          { //假資料
            img: "avatar.png",
            name: "哥啊4",
            tag: "過去過不去都會過去",
            answer: 134,
            listen: 2234
          },
          { //假資料
            img: "avatar.png",
            name: "阿迪王5",
            tag: "過去過不去都會過去",
            answer: 134,
            listen: 2234
          },
          { //假資料
            img: "avatar.png",
            name: "啊打發6",
            tag: "過去過不去都會過去",
            answer: 134,
            listen: 2234
          },
          { //假資料
            img: "avatar.png",
            name: "咖妃7",
            tag: "過去過不去都會過去",
            answer: 134,
            listen: 2234
          },
          ]
        }); break;
      case 1:
        this.setData({
          currentTab: e.detail.current,
          expertList: [{ //假資料
            img: "avatar.png",
            name: "情感1",
            tag: "過去過不去都會過去",
            answer: 134,
            listen: 2234
          },
          { //假資料
            img: "avatar.png",
            name: "分分2",
            tag: "過去過不去都會過去",
            answer: 134,
            listen: 2234
          },
          { //假資料
            img: "avatar.png",
            name: "挖方3",
            tag: "過去過不去都會過去",
            answer: 134,
            listen: 2234
          },
          { //假資料
            img: "avatar.png",
            name: "哥啊4",
            tag: "過去過不去都會過去",
            answer: 134,
            listen: 2234
          },
          { //假資料
            img: "avatar.png",
            name: "阿迪王5",
            tag: "過去過不去都會過去",
            answer: 134,
            listen: 2234
          },
          { //假資料
            img: "avatar.png",
            name: "啊打發6",
            tag: "過去過不去都會過去",
            answer: 134,
            listen: 2234
          },
          { //假資料
            img: "avatar.png",
            name: "咖妃7",
            tag: "過去過不去都會過去",
            answer: 134,
            listen: 2234
          },
          ]
        }); break;
      case 2:
        this.setData({
          currentTab: e.detail.current,
          expertList: [{ //假資料
            img: "avatar.png",
            name: "職場",
            tag: "過去過不去都會過去",
            answer: 134,
            listen: 2234
          },
          { //假資料
            img: "avatar.png",
            name: "咖妃挖2",
            tag: "過去過不去都會過去",
            answer: 134,
            listen: 2234
          },
          { //假資料
            img: "avatar.png",
            name: "把我3",
            tag: "過去過不去都會過去",
            answer: 134,
            listen: 2234
          },
          { //假資料
            img: "avatar.png",
            name: "哥啊4",
            tag: "過去過不去都會過去",
            answer: 134,
            listen: 2234
          },
          { //假資料
            img: "avatar.png",
            name: "阿迪王5",
            tag: "過去過不去都會過去",
            answer: 134,
            listen: 2234
          },
          { //假資料
            img: "avatar.png",
            name: "啊打發6",
            tag: "過去過不去都會過去",
            answer: 134,
            listen: 2234
          },
          { //假資料
            img: "avatar.png",
            name: "咖妃7",
            tag: "過去過不去都會過去",
            answer: 134,
            listen: 2234
          },
          ]
        }); break;
      case 3:
        this.setData({
          currentTab: e.detail.current,
          expertList: [{ //假資料
            img: "avatar.png",
            name: "育兒1",
            tag: "過去過不去都會過去",
            answer: 134,
            listen: 2234
          },
          { //假資料
            img: "avatar.png",
            name: "分分2",
            tag: "過去過不去都會過去",
            answer: 134,
            listen: 2234
          },
          { //假資料
            img: "avatar.png",
            name: "挖方3",
            tag: "過去過不去都會過去",
            answer: 134,
            listen: 2234
          },
          { //假資料
            img: "avatar.png",
            name: "哥啊4",
            tag: "過去過不去都會過去",
            answer: 134,
            listen: 2234
          },
          { //假資料
            img: "avatar.png",
            name: "阿迪王5",
            tag: "過去過不去都會過去",
            answer: 134,
            listen: 2234
          },
          { //假資料
            img: "avatar.png",
            name: "啊打發6",
            tag: "過去過不去都會過去",
            answer: 134,
            listen: 2234
          },
          { //假資料
            img: "avatar.png",
            name: "咖妃7",
            tag: "過去過不去都會過去",
            answer: 134,
            listen: 2234
          },
          ]
        }); break;
      case 4:
        this.setData({
          currentTab: e.detail.current,
          expertList: [{ //假資料
            img: "avatar.png",
            name: "糾紛1",
            tag: "過去過不去都會過去",
            answer: 134,
            listen: 2234
          },
          { //假資料
            img: "avatar.png",
            name: "分分2",
            tag: "過去過不去都會過去",
            answer: 134,
            listen: 2234
          },
          { //假資料
            img: "avatar.png",
            name: "挖方3",
            tag: "過去過不去都會過去",
            answer: 134,
            listen: 2234
          },
          { //假資料
            img: "avatar.png",
            name: "哥啊4",
            tag: "過去過不去都會過去",
            answer: 134,
            listen: 2234
          },
          { //假資料
            img: "avatar.png",
            name: "阿迪王5",
            tag: "過去過不去都會過去",
            answer: 134,
            listen: 2234
          },
          { //假資料
            img: "avatar.png",
            name: "啊打發6",
            tag: "過去過不去都會過去",
            answer: 134,
            listen: 2234
          },
          { //假資料
            img: "avatar.png",
            name: "咖妃7",
            tag: "過去過不去都會過去",
            answer: 134,
            listen: 2234
          },
          ]
        }); break;
      case 5:
        this.setData({
          currentTab: e.detail.current,
          expertList: [{ //假資料
            img: "avatar.png",
            name: "青蔥1",
            tag: "過去過不去都會過去",
            answer: 134,
            listen: 2234
          },
          { //假資料
            img: "avatar.png",
            name: "分分2",
            tag: "過去過不去都會過去",
            answer: 134,
            listen: 2234
          },
          { //假資料
            img: "avatar.png",
            name: "挖方3",
            tag: "過去過不去都會過去",
            answer: 134,
            listen: 2234
          },
          { //假資料
            img: "avatar.png",
            name: "哥啊4",
            tag: "過去過不去都會過去",
            answer: 134,
            listen: 2234
          },
          { //假資料
            img: "avatar.png",
            name: "阿迪王5",
            tag: "過去過不去都會過去",
            answer: 134,
            listen: 2234
          },
          { //假資料
            img: "avatar.png",
            name: "啊打發6",
            tag: "過去過不去都會過去",
            answer: 134,
            listen: 2234
          },
          { //假資料
            img: "avatar.png",
            name: "咖妃7",
            tag: "過去過不去都會過去",
            answer: 134,
            listen: 2234
          },
          ]
        }); break;
      case 6:
        this.setData({
          currentTab: e.detail.current,
          expertList: [{ //假資料
            img: "avatar.png",
            name: "全部1",
            tag: "過去過不去都會過去",
            answer: 134,
            listen: 2234
          },
          { //假資料
            img: "avatar.png",
            name: "分分2",
            tag: "過去過不去都會過去",
            answer: 134,
            listen: 2234
          },
          { //假資料
            img: "avatar.png",
            name: "挖方3",
            tag: "過去過不去都會過去",
            answer: 134,
            listen: 2234
          },
          { //假資料
            img: "avatar.png",
            name: "哥啊4",
            tag: "過去過不去都會過去",
            answer: 134,
            listen: 223
          },
          { //假資料
            img: "avatar.png",
            name: "阿迪王5",
            tag: "過去過不去都會過去",
            answer: 134,
            listen: 22
          },
          { //假資料
            img: "avatar.png",
            name: "啊打發6",
            tag: "過去過不去都會過去",
            answer: 134,
            listen: 223
          },
          { //假資料
            img: "avatar.png",
            name: "咖妃7",
            tag: "過去過不去都會過去",
            answer: 134,
            listen: 2234
          },
          ]
        }); break;
      case 7:
        this.setData({
          currentTab: e.detail.current,
          expertList: [{ //假資料
            img: "avatar.png",
            name: "其他1",
            tag: "過去過不去都會過去",
            answer: 134,
            listen: 2234
          },
          { //假資料
            img: "avatar.png",
            name: "分分2",
            tag: "過去過不去都會過去",
            answer: 134,
            listen: 2234
          },
          { //假資料
            img: "avatar.png",
            name: "挖方3",
            tag: "過去過不去都會過去",
            answer: 134,
            listen: 2234
          },
          { //假資料
            img: "avatar.png",
            name: "哥啊4",
            tag: "過去過不去都會過去",
            answer: 134,
            listen: 2234
          },
          { //假資料
            img: "avatar.png",
            name: "阿迪王5",
            tag: "過去過不去都會過去",
            answer: 134,
            listen: 2234
          },
          { //假資料
            img: "avatar.png",
            name: "啊打發6",
            tag: "過去過不去都會過去",
            answer: 134,
            listen: 2234
          },
          { //假資料
            img: "avatar.png",
            name: "咖妃7",
            tag: "過去過不去都會過去",
            answer: 134,
            listen: 2234
          },
          ]
        }); break;
    }
    this.checkCor();
  },
  // 點選標題切換當前頁時改變樣式
  swichNav: function(e) {
    var cur = e.target.dataset.current;
    if (this.data.currentTaB == cur) {
      return false;
    } else {
      this.setData({
        currentTab: cur
      })
    }
  },
  //判斷當前滾動超過一屏時，設定tab標題滾動條。
  checkCor: function() {
    if (this.data.currentTab > 4) {
      this.setData({
        scrollLeft: 300
      })
    } else {
      this.setData({
        scrollLeft: 0
      })
    }
  },
  onLoad: function() {
    var that = this;
    //  高度自適應
    wx.getSystemInfo({
      success: function(res) {
        var clientHeight = res.windowHeight,
          clientWidth = res.windowWidth,
          rpxR = 750 / clientWidth;
        var calc = clientHeight * rpxR - 100;
        console.log(calc)
        that.setData({
          winHeight: calc
        });
      }
    });
  },
  info(e){
    var that = this
    //資料的獲取、獲取點選了哪個“資訊”按鈕 輸出所對應的name
    console.log(that.data.expertList[e.currentTarget.dataset.index].name)
  },
  footerTap: app.footerTap
})

WXSS

.tab-h {
  height: 80rpx;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  line-height: 80rpx;
  background: #f7f7f7;
  font-size: 16px;
  white-space: nowrap;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
}

.tab-item {
  margin: 0 36rpx;
  display: inline-block;
}

.tab-item.active {
  color: #4675f9;
  position: relative;
}

.tab-item.active:after {
  content: "";
  display: block;
  height: 8rpx;
  width: 52rpx;
  background: #4675f9;
  position: absolute;
  bottom: 0;
  left: 5rpx;
  border-radius: 16rpx;
}

.item-ans {
  width: 100%;
  display: flex;
  flex-grow: row no-wrap;
  justify-content: space-between;
  padding: 30rpx;
  box-sizing: border-box;
  height: 180rpx;
  align-items: center;
  border-bottom: 1px solid #f2f2f2;
}

.avatar {
  width: 100rpx;
  height: 100rpx;
  position: relative;
  padding-right: 30rpx;
}

.avatar .img {
  width: 100%;
  height: 100%;
}

.avatar .doyen {
  width: 40rpx;
  height: 40rpx;
  position: absolute;
  bottom: -2px;
  right: 20rpx;
}

.expertInfo {
  font-size: 12px;
  flex-grow: 2;
  color: #b0b0b0;
  line-height: 1.5em;
}

.expertInfo .name {
  font-size: 16px;
  color: #000;
  margin-bottom: 6px;
}

.askBtn {
  width: 120rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  font-size: 14px;
  border-radius: 60rpx;
  border: 1px solid #4675f9;
  color: #4675f9;
}

.tab-content {
  margin-top: 80rpx;
}

.scoll-h {
  height: 100%;
}
/* 
.swiper {
  height: 100%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-top: 1000rpx; 
}
swiper-item view.item-ans {
  height: 100%;
  overflow-y: scroll;
} */

部落格借鑑

https://blog.csdn.net/sophie_u/article/details/71745125

微信小程式-06 tab選項卡滑動切換與列表Item（scroll 、 swiper）資料的獲取等所用到的都有了

目錄示例圖片 WXML js WXSS 示例圖片 WXML <view > <scroll-view scroll-x="true" class="tab-h" scroll-left="{{scrollLeft}}

微信小程式-滾動Tab選項卡

前言：今天呢給大家詳細講解一下滾動Tab選項卡：左右可滑動切換的效果，希望對大家做專案時候有用！以前也遇到過這個，但是沒有做記錄。轉載來源於：https://www.jianshu.com/p/94849f9c2ff2 一、wxml結構 tab標題因一排八個，所以使用 scroll

微信小程式滾動Tab選項卡：左右可滑動切換

最終效果如上。問題： 1、tab標題總共8個，所以一屏無法全部顯示。 2、tab內容區左右滑動切換時，tab標題隨即做標記（active）。 3、當active的標題不在當前

微信小程式開發之選項卡tab(swiper)滑動切換功能實現

該功能實現依賴於微信小程式模板容器 swiper，及其提供的屬性方法；具體實現如下：上程式碼index.wxml <view class="page"> <!-- <vi

微信小程式實現tabs選項卡效果簡單程式碼例項

微信內部很多元件都已經封裝好了,但是卻沒有tab選項卡的元件，選項卡還是很常用的，下面是一個簡單的效果 wxml <view class="swiper-tab">

微信小程式開發之選項卡(視窗底部TabBar)頁面切換

微信小程式開發中視窗底部tab欄切換頁面很簡單很方便. 程式碼: 1.app.json //app.json { "pages":[ "pages/index/index",

微信小程式訊息通知-打卡考勤

微信小程式訊息通知-打卡考勤效果: 稍微改一下js就行,有不必要的錯誤,我就不改了,哈哈! index.js //index.js const app = getApp() // 填寫微信小程式appid var appid =

微信小程式下拉選項，回撥輸入框

wxml: <view class='select_box'> <view class='select' catchtap='selectTap'> <text class='select_text'>{{sele

微信小程式的tab欄顯示緩慢優化

在寫tab欄切換的時候很坑爹，當下拉重新整理了很多資料之後，點選其他的百貨啊什麼的，高亮的效果跟隨過來十分緩慢，導致就像頁面克頓，資料沒有載入過來一樣，其實資料早就到了，就是顯示的很慢。經過一位非同尋常的靚仔提示@阿貓阿狗哈將@tap放在class前面，並且用

微信小程式，易打卡

《易打卡》—— 精準定位，一鍵打卡，記錄便捷匯出，排名實時更新，戒掉遲到，換你高效人生！這款小程式是在微信內測開始時期就一邊學習一邊開發，開發過程中也是隨著微信小程式的功能以及API迭代而不斷更新調整產品的形態與功能。http://www.see-source.com/w

微信小程式之tab切換後執行onload操作

小程式tab切換後，不會執行onload操作，那麼我們在某tab列表進入詳情後，再次返回列表，需要重新重新整理頁面，該如何處理？程式碼如下：在呼叫wx.switchTab後，通過success操作，呼叫getCurrentPages（）.pop()方法獲取上一個頁面的

微信小程式中初始化完成自動切換到設定的tab頁

我們使用app.json檔案來對微信小程式進行全域性配置，決定頁面檔案的路徑、視窗表現、設定網路超時時間、設定多 tab 等。如果我們的小程式是一個多 tab 應用（客戶端視窗的底部或頂部有 tab 欄

微信小程式實現tab和swiper切換結合效果viewpage+tab效果

swiper.js 程式碼 //index.js //獲取應用例項 var app = getApp(); var mtabW; Page({ data: { tabs: ["A", "B", "C", "D", "E"],//tob標題

微信小程式實現tab切換

程式碼如下： wxml <view class="tab"> <text class="image-text {{select1?'yes':'no'}}" bindtap="s

微信小程式實現tab頁面切換功能

wxml<scroll-view scroll-x="true" class="ip_tab_comtainer"> <view class="ip_tab_comtainer_padd"></view> <block wx:for="{{ips}}" wx:

微信小程式之側邊欄滑動實現（附完整原始碼）

目錄一、效果圖二、原理解析三、原始碼四、專案下載同類文章推薦：更多幹貨關注公眾號：一、效果圖講什麼都不如直接上效果圖好，所以我們先來看下實現效果如何。通過滑動螢幕，或者點選左上角的圖示按鈕，都能實現側邊欄的劃出效果。 &nb

微信小程式同一個頁面壓入歷史棧兩次，返回第二次頁面沒資料

微信小程式同一個頁面壓入歷史棧兩次，返回第二次頁面沒資料問題描述最近專案中遇到一個場景，頁面A(A1) => B => A(A2), 然後返回時，先從頁面返回時，從A2 => B => A1, A2 回退時，會觸發 A2 的 onUnload（

微信小程式開發js的md5加密中文與php的加密中文不一致

解決方法，js先把中文轉為utf8，再md5加密， md5.js function safe_add(x, y) { var lsw = (x & 0xFFFF) + (y & 0xFFFF) var msw = (x >> 16) +

微信小程式——自定義底部導航樣式切換

1、以下截圖是靜態展示部分解析： 1、catchtap='goHome' 是點選事件，點選的時候傳遞data-num='1'，點選事件方法名都是一樣的，只是傳入的data-num值不同，通過這個不同的值，使用三元運算子來判斷需要顯示的樣式和圖示 2、圖示切換，通過

微信小程式專案實戰【二】-------實現視訊列表展示

這一節我們主要介紹下如何實現視訊列表展示，這裡展示的資料是從雲資料庫裡面獲取顯示到介面上的。【效果展示】【分析】我們通過授權登入之後跳轉到這個介面之後就可以看到我們自己資料庫中所需要顯示的視訊，這裡我們使用block標籤以及wx:for來實現遍歷我們需要顯示的

微信小程式-06 tab選項卡滑動切換與列表Item（scroll 、 swiper）資料的獲取等所用到的都有了

示例圖片

WXML

js

WXSS

相關推薦