欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序自定義可滑動頂部TabBar選項(xiàng)卡實(shí)現(xiàn)頁面切換功能示例

 更新時(shí)間:2019年05月14日 11:26:54   作者:清風(fēng)思月  
這篇文章主要介紹了微信小程序自定義可滑動頂部TabBar選項(xiàng)卡實(shí)現(xiàn)頁面切換功能,結(jié)合實(shí)例形式分析了微信小程序自定義頂部TabBar選項(xiàng)卡頁面切換功能的相關(guān)布局、樣式及功能實(shí)現(xiàn)技巧,需要的朋友可以參考下

本文實(shí)例講述了微信小程序自定義可滑動頂部TabBar選項(xiàng)卡實(shí)現(xiàn)頁面切換功能。分享給大家供大家參考,具體如下:

頂部滾動選項(xiàng)卡

話不多說,直接上代碼

pages/home/home.wxml

<scroll-view scroll-x="true" style='width: 100%; white-space:nowrap; '>
<!-- tab -->
<view class="tab">
<view class="tab-nav" style='font-size:12px'>
<view wx:for="{{tabnav.tabitem}}" bindtap="setTab" data-tabindex="{{index}}" style="min-width:20%;max-width:20%;text-align:center;height: 80rpx;background: #fff;border-bottom:{{index>4?'1rpx solid #ddd;':''}}">{{item.text}}</view>
<view>
<view class="tab-line" style="width:{{100/tabnav.tabnum}}%;transform:translateX({{100*showtab}}%);"></view>
</view>
</view>
</view>
</scroll-view>
<swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:150rpx" bindchange="bindChange">
<swiper-item>
<view>分類1</view>
</swiper-item>
<swiper-item>
<view>分類2</view>
</swiper-item>
<swiper-item>
<view>分類3</view>
</swiper-item>
<swiper-item>
<view>分類4</view>
</swiper-item>
<swiper-item>
<view>分類5</view>
</swiper-item>
<swiper-item>
<view>分類6</view>
</swiper-item>
</swiper>

pages/home/home.wxss

.tab {
display: flex;
flex-direction: column;
}
.tab-nav {
border-bottom: 1rpx solid #ddd;
width: 100%;
height: 80rpx;
display: flex;
line-height: 79rpx;
position: relative;
}
.tab-line {
position: absolute;
left: 0;
bottom: -1rpx;
height: 4rpx;
background: #f7982a;
transition: all 0.3s;
}
.tab-content {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
}
/*選項(xiàng)卡頁面聯(lián)動切換*/
.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: 33.33%;
color: #777;
}
.on {
color: #da7c0c;
border-bottom: 1rpx solid #da7c0c;
}
.swiper-box {
display: block;
height: 100%;
width: 100%;
overflow: hidden;
}
.swiper-box view {
text-align: center;
}

pages/home/home.js

Page({
data: {
showtab: 0, //頂部選項(xiàng)卡索引
tabnav: {
tabnum: 5,
tabitem: [
{
"id": 0,
"text": "分類1"
},
{
"id": 1,
"text": "分類2"
},
{
"id": 2,
"text": "分類3"
},
{
"id": 3,
"text": "分類4"
},
{
"id": 4,
"text": "分類5"
},
{
"id": 5,
"text": "分類6"
}
]
},
productList: [],
// tab切換
currentTab: 0,
},
onLoad: function () {
},
setTab: function (e) {
var that = this
that.setData({
showtab: e.currentTarget.dataset.tabindex
})
if (this.data.currentTab === e.currentTarget.dataset.tabindex) {
return false;
} else {
that.setData({
currentTab: e.currentTarget.dataset.tabindex
})
}
},
/**
* 滑動切換tab
*/
bindChange: function (e) {
var that = this;
that.setData({ currentTab: e.detail.current,
showtab: e.detail.current});
}
})

該代碼實(shí)現(xiàn)基于兩個(gè)大神的代碼,(鏈接: http://www.dbjr.com.cn/article/161227.htmhttp://www.dbjr.com.cn/article/155522.htm),在兩位大神的基礎(chǔ)上衍生出的可滾動的頂部選項(xiàng)卡,在此致謝。代碼缺陷:當(dāng)向右滑動到第6個(gè)頁面的時(shí)候選項(xiàng)卡沒有自動滑動。

希望本文所述對大家微信小程序開發(fā)有所幫助。

相關(guān)文章

  • javascript使用正則實(shí)現(xiàn)去掉字符串前面的所有0

    javascript使用正則實(shí)現(xiàn)去掉字符串前面的所有0

    這篇文章主要介紹了javascript使用正則實(shí)現(xiàn)去掉字符串前面的所有0,需要的朋友可以參考下
    2018-07-07
  • javascript代碼優(yōu)化的8點(diǎn)總結(jié)

    javascript代碼優(yōu)化的8點(diǎn)總結(jié)

    本篇文章給大家分享了關(guān)于javascript代碼優(yōu)化的8點(diǎn)總結(jié),希望我們整理的內(nèi)容能夠幫助到大家。
    2018-01-01
  • javascript實(shí)現(xiàn)的猜數(shù)小游戲完整實(shí)例代碼

    javascript實(shí)現(xiàn)的猜數(shù)小游戲完整實(shí)例代碼

    這篇文章主要介紹了javascript實(shí)現(xiàn)的猜數(shù)小游戲,游戲中用戶共有10次猜測機(jī)會,并且每次都有不同的提示信息,該游戲涉及javascript流程控制與數(shù)值運(yùn)算的相關(guān)技巧,需要的朋友可以參考下
    2016-05-05
  • 使用原生JS實(shí)現(xiàn)彈出層特效

    使用原生JS實(shí)現(xiàn)彈出層特效

    這篇文章主要介紹了使用原生JS實(shí)現(xiàn)彈出層特效,需要的朋友可以參考下
    2014-12-12
  • Uniapp中嵌入H5并在H5中跳轉(zhuǎn)到APP的指定頁面方法詳解

    Uniapp中嵌入H5并在H5中跳轉(zhuǎn)到APP的指定頁面方法詳解

    Uniapp是一款基于Vue.js框架的跨平臺開發(fā)工具,支持在一套代碼中開發(fā)出運(yùn)行于各大平臺的應(yīng)用程序,這篇文章主要給大家介紹了關(guān)于Uniapp中嵌入H5并在H5中跳轉(zhuǎn)到APP的指定頁面的相關(guān)資料,需要的朋友可以參考下
    2023-09-09
  • 淺談JavaScript中的parseInt()的妙用

    淺談JavaScript中的parseInt()的妙用

    本文主要介紹了JavaScript中的parseInt()的妙用,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-07-07
  • JavaScript實(shí)現(xiàn)拖拽和縮放效果

    JavaScript實(shí)現(xiàn)拖拽和縮放效果

    這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)拖拽和縮放效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-08-08
  • JavaScript數(shù)據(jù)推送Comet技術(shù)詳解

    JavaScript數(shù)據(jù)推送Comet技術(shù)詳解

    這篇文章主要為大家詳細(xì)介紹了JavaScript數(shù)據(jù)推送Comet技術(shù),感興趣的小伙伴們可以參考一下
    2016-04-04
  • js tab欄切換代碼實(shí)例解析

    js tab欄切換代碼實(shí)例解析

    這篇文章主要介紹了js tab欄切換代碼實(shí)例解析,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2019-09-09
  • 頁面使用密碼保護(hù)代碼

    頁面使用密碼保護(hù)代碼

    這是一個(gè)由JS實(shí)現(xiàn)的網(wǎng)頁密碼保護(hù)代碼,在進(jìn)入網(wǎng)頁前需要在彈出框中輸入密碼才可以,不過現(xiàn)在不怎么用了,一般情況下,目前都在后臺處理這種功能,用戶輸入用戶名和密碼后交給服務(wù)器處理,然后再返回信息,若登錄無誤就可看到某些內(nèi)容
    2013-04-04

最新評論