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

微信小程序?qū)崿F(xiàn)滴滴導(dǎo)航tab切換效果

 更新時(shí)間:2018年07月24日 14:24:00   作者:蘇蘇綠豆酥  
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)滴滴導(dǎo)航tab切換效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)tab切換效果的具體代碼,供大家參考,具體內(nèi)容如下

效果圖如下: (請(qǐng)自動(dòng)忽視底部tab.....)

 

簡(jiǎn)單介紹一下:頂部導(dǎo)航使用 scroll-view 組件 中間的內(nèi)容部分使用 swiper 組件

實(shí)現(xiàn)的邏輯就是: 先這樣在這樣,這樣然后那樣。(此處省略200個(gè)字)。

代碼如下,復(fù)制可用

wxml

 <view class="contain">
 <!-- 導(dǎo)航欄 -->
 <scroll-view class="tab" scroll-x scroll-left="{{tabScroll}}" scroll-with-animation="true">
 <block wx:for="{{menuList}}" wx:key="index">
  <view class="tab-item {{currentTab == index ? 'active' : ''}}" data-current="{{index}}" bindtap='clickMenu'>{{item.name}}</view>
 </block>
 </scroll-view>
 <!-- 頁(yè)面 -->
 <swiper class="content" style='height: {{height}}px' duration="1000" current="{{currentTab}}" bindchange="changeContent">
 <swiper-item class="content-item" wx:for="{{menuList}}" wx:key="index">這里是{{item.name}}</swiper-item>
 </swiper>
</view>

js

Page({
 data: {
 menuList: [{
  name: "快車(chē)"
 }, {
  name: "順風(fēng)車(chē)"
 }, {
  name: "外賣(mài)"
 }, {
  name: "單車(chē)"
 }, {
  name: "禮橙專(zhuān)車(chē)"
 }, {
  name: "出租車(chē)"
 }, {
  name: "公交"
 }, {
  name: "代駕"
 }, {
  name: "豪華車(chē)"
 }, {
  name: "自駕租車(chē)"
 }, {
  name: "拼車(chē)"
 }, {
  name: "二手車(chē)"
 }],
 tabScroll: 0,
 currentTab: 0,
 windowHeight: '',
 windowWidth: ''
 },
 onLoad: function() { 
 wx.getSystemInfo({  // 獲取當(dāng)前設(shè)備的寬高,文檔有
  success: (res) => { 
  this.setData({
   windowHeight: res.windowHeight,
   windowWidth: res.windowWidth
  })
  },
 })
 },
 onReady: function() {
 wx.setNavigationBarTitle({ //修改標(biāo)題文字
  title: ''
 })
 },
 clickMenu: function(e) {
 var current = e.currentTarget.dataset.current //獲取當(dāng)前tab的index
 var tabWidth = this.data.windowWidth / 5 // 導(dǎo)航tab共5個(gè),獲取一個(gè)的寬度
 this.setData({
  tabScroll: (current - 2) * tabWidth //使點(diǎn)擊的tab始終在居中位置
 }) 
 if (this.data.currentTab == current) {
  return false
 } else {
  this.setData({currentTab: current })
 }
 },
 changeContent: function(e) {
 var current = e.detail.current // 獲取當(dāng)前內(nèi)容所在index,文檔有
 var tabWidth = this.data.windowWidth / 5 
 this.setData({
  currentTab: current,
  tabScroll: (current - 2) * tabWidth
 })
 }
})

css 

.contain{
 width: 100%;
 height: 100%;
}
.tab{
 width: 100%;
 height: 100rpx;
 position: fixed;
 top: 0;
 left: 0;
 z-index: 100;
 white-space: nowrap;
 box-sizing: border-box;
 overflow: hidden;
 line-height: 100rpx;
 
}
.tab-item{
 display: inline-block;
 width: 20%;
 text-align: center;
 font-size: 14px;
 color: #8f9193;
}
.active{
 color: #ff502c
}
.content{
 padding-top: 100rpx;
 box-sizing: border-box;
 text-align: center;
 font-size: 14px;
}
.content-item{
 overflow-y: scroll
}

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • js實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)簡(jiǎn)單實(shí)例

    js實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)簡(jiǎn)單實(shí)例

    這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)簡(jiǎn)單實(shí)例,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-01-01
  • Javascript中call,apply,bind方法的詳解與總結(jié)

    Javascript中call,apply,bind方法的詳解與總結(jié)

    本文主要Javascript中call,apply,bind方法的進(jìn)行全面分析,并在文章結(jié)尾對(duì)call,apply,bind方法的聯(lián)系和區(qū)別做了總結(jié),具有很好的參考價(jià)值,需要的朋友一起來(lái)看下吧
    2016-12-12
  • 最通俗易懂的javascript變量提升詳解

    最通俗易懂的javascript變量提升詳解

    下面小編就為大家?guī)?lái)一篇最通俗易懂的javascript變量提升詳解。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-08-08
  • 原生js實(shí)現(xiàn)自定義滾動(dòng)條組件

    原生js實(shí)現(xiàn)自定義滾動(dòng)條組件

    這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)自定義滾動(dòng)條組件的開(kāi)發(fā),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-01-01
  • 微信小程序?qū)崿F(xiàn)星級(jí)評(píng)價(jià)

    微信小程序?qū)崿F(xiàn)星級(jí)評(píng)價(jià)

    這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)星級(jí)評(píng)價(jià),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2019-11-11
  • uni-app和原生小程序混合開(kāi)發(fā)的具體實(shí)現(xiàn)過(guò)程

    uni-app和原生小程序混合開(kāi)發(fā)的具體實(shí)現(xiàn)過(guò)程

    最近項(xiàng)目中遇到了一些功能需要與原生進(jìn)行混合開(kāi)發(fā),所以下面這篇文章主要給大家介紹了關(guān)于uni-app和原生小程序混合開(kāi)發(fā)的具體實(shí)現(xiàn)過(guò)程,需要的朋友可以參考下
    2022-07-07
  • js判斷鼠標(biāo)位置是否在某個(gè)div中的方法

    js判斷鼠標(biāo)位置是否在某個(gè)div中的方法

    這篇文章主要介紹了js判斷鼠標(biāo)位置是否在某個(gè)div中的方法,涉及JavaScript針對(duì)鼠標(biāo)事件的響應(yīng)及頁(yè)面元素屬性操作相關(guān)技巧,需要的朋友可以參考下
    2016-02-02
  • JS仿Windows實(shí)現(xiàn)桌面主題特效

    JS仿Windows實(shí)現(xiàn)桌面主題特效

    這篇文章主要介紹了如何利用HTML+CSS+JS模仿Windows實(shí)現(xiàn)桌面主題特效,文中的示例代碼講講詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
    2022-06-06
  • 老生常談javascript?hash的使用

    老生常談javascript?hash的使用

    在javascript中,hash指的是哈希表,是一種根據(jù)關(guān)鍵字直接訪問(wèn)內(nèi)存存儲(chǔ)位置的數(shù)據(jù)結(jié)構(gòu),hash就是一個(gè)賦值的方法,但實(shí)際用的并不需要太復(fù)雜,能用的就一點(diǎn)點(diǎn),寫(xiě)法也非常簡(jiǎn)單,hash有多種寫(xiě)法,本文給大家介紹javascript?hash使用,感興趣的朋友一起看看吧
    2023-10-10
  • JavaScript中的null和undefined用法解析

    JavaScript中的null和undefined用法解析

    這篇文章主要介紹了JavaScript中的null和undefined用法解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2019-09-09

最新評(píng)論