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

微信小程序實現(xiàn)tab切換效果

 更新時間：2017年11月21日 10:51:16   作者：辣姐什么鬼  
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)tab切換效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下

微信小程序之tab切換效果，如圖：

最近在學習微信小程序并把之前的公司app搬到小程序上，挑一些實現(xiàn)效果記錄一下（主要是官方文檔里沒說的，畢竟官方文檔只是介紹功能）

.wxml代碼：

<view class="body">
 <view class="nav bc_white">
  <view class="{{selected?'red':'default'}}" bindtap="selected">系統(tǒng)提醒</view>
  <view class="{{selected1?'red':'default'}}" bindtap="selected1">優(yōu)惠活動</view>
 </view>
 <view class="{{selected?'show':'hidden'}}">for system</view>
 <view class="{{selected1?'show':'hidden'}}">for activity</view>
</view>

.wxss代碼：

page{background-color:#edf0f3;}
.nav{width:100%;height:100rpx;display:flex;flex-direction:row;}
.default{line-height:100rpx;text-align:center;flex:1;border-right:1px solid gainsboro;color:#000;font-weight:bold;font-size:28rpx;}
.red{line-height:100rpx;text-align:center;color:#fc5558;flex:1;border-right:1px solid gainsboro;font-weight:bold;font-size:28rpx;}
.show{display:block;text-align:center;line-height:200rpx;}
.hidden{display:none;text-align:center;line-height:200px;}

.js代碼：

Page({
  data:{
    selected:true,
    selected1:false
    },
  selected:function(e){
    this.setData({
      selected1:false,
      selected:true
    })
  },
  selected1:function(e){
    this.setData({
      selected:false,
      selected1:true
    })
  }
})

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關文章

  • ECharts柱狀圖關閉鼠標hover時的高亮樣式詳解

    ECharts柱狀圖關閉鼠標hover時的高亮樣式詳解

    為了方便使用,echarts的餅圖中給加入了默認的hover高亮效果,下面這篇文章主要給大家介紹了關于ECharts柱狀圖關閉鼠標hover時的高亮樣式的相關資料,需要的朋友可以參考下
    2023-04-04
  • javascript瀑布流式圖片懶加載實例

    javascript瀑布流式圖片懶加載實例

    這篇文章主要為大家詳細介紹了javascript瀑布流式圖片懶加載實例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2016-02-02
  • js實現(xiàn)精美的圖片跟隨鼠標效果實例

    js實現(xiàn)精美的圖片跟隨鼠標效果實例

    這篇文章主要介紹了js實現(xiàn)精美的圖片跟隨鼠標效果,實例分析了javascript鼠標事件及頁面樣式的操作技巧,需要的朋友可以參考下
    2015-05-05
  • 詳解如何在JavaScript中使用裝飾器

    詳解如何在JavaScript中使用裝飾器

    Decorator裝飾器是ES7的時候提案的特性，目前處于Stage?3候選階段（2022年10月）。裝飾器簡單來說就是修改類和類方法的語法糖，很多面向對象語言都有裝飾器這一特性。本文就來說說如何在JavaScript中使用裝飾器，需要的可以參考一下
    2022-10-10
  • JS循環(huán)發(fā)送請求時控制請求并發(fā)數(shù)實例

    JS循環(huán)發(fā)送請求時控制請求并發(fā)數(shù)實例

    這篇文章主要介紹了JS循環(huán)發(fā)送請求時控制請求并發(fā)數(shù)實例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-12-12
  • 使用JS進行目錄上傳（相當于批量上傳）

    使用JS進行目錄上傳（相當于批量上傳）

    腳本使用了WScript.Shell和Scripting.FileSystemObject的組件，所以必須要在IE下面和打開安全選項中運行； 另外還用到了Jquery. 代碼只是客戶端代碼， 至于服務器的接收代碼網(wǎng)上好多了
    2010-12-12
  • js HTML DOM EventListener功能與用法實例分析

    js HTML DOM EventListener功能與用法實例分析

    這篇文章主要介紹了js HTML DOM EventListener功能與用法,結合實例形式分析了js HTML DOM EventListener事件監(jiān)聽相關用法及操作注意事項,需要的朋友可以參考下
    2020-04-04
  • JS實現(xiàn)點擊文字對應DIV層不停閃動效果的方法

    JS實現(xiàn)點擊文字對應DIV層不停閃動效果的方法

    這篇文章主要介紹了JS實現(xiàn)點擊文字對應DIV層不停閃動效果的方法,實例分析了javascript操作div層的效果,非常實用,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-03-03
  • div移動 輸入框不能輸入的問題

    div移動 輸入框不能輸入的問題

    使用了移動層，可里面的輸入框卻不能使用了，下面是解決方法需要的朋友可以參考下。
    2009-11-11
  • 淺談Webpack打包優(yōu)化技巧

    淺談Webpack打包優(yōu)化技巧

    這篇文章主要介紹了淺談Webpack打包優(yōu)化，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-06-06

最新評論