微信小程式-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; } */
部落格借鑑