国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

微信小程序?qū)崿F(xiàn)tab點(diǎn)擊切換

3403771864 / 548人閱讀

       微信小程序項(xiàng)目中，要實(shí)現(xiàn)無滑動(dòng)效果，可以用tab點(diǎn)擊切換，看看具體代碼供參考：


　　<!--pages/dingdan/dingdan.wxml-->
　　<view class="body">
　　<view class="swiper-tab">
　　<view wx:for="{{tabList}}" wx:key="index" catchtap="change" class="{{page==index?'selected-menu':'unselect-menu'}}" data-pageid="{{index}}">{{item.title}}({{item.num}})
　　<hr class="{{page==index?'selected-line':'unselect-line'}}" />
　　</view>
　　</view>
　　<view class="view-Content">
　　<view wx:for="{{tabList}}" wx:key="index" class="{{page==index?'show tabCon':'hidden tabCon'}}">
　　<view class="content">
　　<text>暫無訂單{{index}}</text>
　　</view>
　　</view>
　　</view>
　　</view>


　　/* pages/dingdan/dingdan.wxss */
　　page {
　　width: 100%;
　　height: 100%;
　　overflow: hidden;
　　/* background: pink; */
　　}
　　.body {
　　height: 100%;
　　/* background: hotpink; */
　　display: flex;
　　flex-direction: column;
　　}
　　/* tab欄 */
　　.swiper-tab {
　　width: 100%;
　　height: 80rpx;
　　text-align: center;
　　display: flex;
　　justify-content: space-between;
　　background: white;
　　}
　　.selected-menu {
　　display: flex;
　　flex-direction: column;
　　align-items: center;
　　color: #ff5050;
　　background: #fff;
　　font-size: 32rpx;
　　font-weight: bold;
　　font-family: PingFang SC;
　　font-weight: 400;
　　width: 33%;
　　height: 60rpx;
　　line-height: 60rpx;
　　opacity: 1;
　　/* border-bottom: 2px solid #ff5050; */
　　position: relative;
　　}
　　.unselect-menu {
　　display: flex;
　　flex-direction: column;
　　align-items: center;
　　font-size: 16px;
　　font-family: PingFang SC;
　　font-weight: 400;
　　color: #4f4f50;
　　width: 33%;
　　height: 60rpx;
　　line-height: 60rpx;
　　background: #fff;
　　opacity: 1;
　　position: relative;
　　/* border-radius: 34rpx; */
　　}
　　.selected-line {
　　background: #ff5050;
　　height: 4rpx;
　　width: 90rpx;
　　position: absolute;
　　/* margin-top: 10rpx; */
　　bottom: -18rpx;
　　width: 60rpx;
　　}
　　/* 內(nèi)容 */
　　.view-Content {
　　flex: 1;
　　overflow-y: auto;
　　background-color: rgb(236, 236, 236);
　　}
　　.tabCon {
　　height: 100%;
　　}
　　/* 展示隱藏 */
　　.show {
　　display: block;
　　}
　　.hidden {
　　display: none;
　　}


　　Page({
　　/**
　　* 頁面的初始數(shù)據(jù)
　　*/
　　data: {
　　page: 0, // page：當(dāng)前頁--
　　tabList: [{
　　title: '菜單1',
　　num: 0
　　}, {
　　title: '菜單2',
　　num: 0
　　}, {
　　title: '菜單3',
　　num: 0
　　}],
　　},
　　// 切換tab
　　change: function (event) {
　　console.log('切換時(shí)會(huì)調(diào)用', event);
　　var a = event.currentTarget.dataset.pageid
　　this.setData({
　　page: a,
　　})
　　},
　　/**
　　* 生命周期函數(shù)--監(jiān)聽頁面加載
　　*/
　　onLoad: function (options) {
　　},
　　/**
　　* 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
　　*/
　　onReady: function () {
　　},
　　/**
　　* 生命周期函數(shù)--監(jiān)聽頁面顯示
　　*/
　　onShow: function () {
　　},
　　/**
　　* 生命周期函數(shù)--監(jiān)聽頁面隱藏
　　*/
　　onHide: function () {
　　},
　　/**
　　* 生命周期函數(shù)--監(jiān)聽頁面卸載
　　*/
　　onUnload: function () {
　　},
　　/**
　　* 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作
　　*/
　　onPullDownRefresh: function () {
　　},
　　/**
　　* 頁面上拉觸底事件的處理函數(shù)
　　*/
　　onReachBottom: function () {
　　},
　　/**
　　* 用戶點(diǎn)擊右上角分享
　　*/
　　onShareAppMessage: function () {
　　},
　　})

       感謝閱讀，請(qǐng)關(guān)注更多后續(xù)精彩內(nèi)容。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/127810.html

相關(guān)文章

  • 微信小程序之選項(xiàng)卡

    摘要：我們?cè)诤瘮?shù)中通過獲取設(shè)備的寬高來設(shè)置組件高度以及高度為導(dǎo)航欄的高度點(diǎn)擊導(dǎo)航欄切換內(nèi)容點(diǎn)擊切換滑動(dòng)內(nèi)容切換導(dǎo)航欄滑動(dòng)切換可滾動(dòng)區(qū)域滾動(dòng)最底刷新數(shù)據(jù)頁面上拉觸底事件的處理函數(shù)更新列表一個(gè)漂亮的選項(xiàng)卡就完成了完整案例 選項(xiàng)卡隨處可見，微信小程序中也不例外，下面來寫一個(gè)簡單的小程序選項(xiàng)卡 思路 之前寫過基于swiper的選項(xiàng)卡，在小程序中有swiper組件，毫無疑問這里要用到swiper組件...

    stormjun 評(píng)論0 收藏0

  • 微信小程序小技巧系列《一》幻燈片，tab導(dǎo)航切換

    摘要：作者來自幻燈片使用微信小程序原生組件實(shí)現(xiàn)。配合在邏輯頁面配置數(shù)據(jù)實(shí)現(xiàn)幻燈片導(dǎo)航切換由于微信小程序不能直接操作，所以這里設(shè)置一個(gè)值。用來模擬操作，來實(shí)現(xiàn)導(dǎo)航內(nèi)容的切換用于模擬操作轉(zhuǎn)自轉(zhuǎn)載地址 作者：gou-tian來自：github 幻燈片 使用微信小程序原生組件swiper實(shí)現(xiàn)。 ...

    MangoGoing 評(píng)論0 收藏0

  • 微信小程序小技巧系列《一》幻燈片，tab導(dǎo)航切換

    摘要：作者來自幻燈片使用微信小程序原生組件實(shí)現(xiàn)。配合在邏輯頁面配置數(shù)據(jù)實(shí)現(xiàn)幻燈片導(dǎo)航切換由于微信小程序不能直接操作，所以這里設(shè)置一個(gè)值。用來模擬操作，來實(shí)現(xiàn)導(dǎo)航內(nèi)容的切換用于模擬操作轉(zhuǎn)自轉(zhuǎn)載地址 作者：gou-tian來自：github 幻燈片 使用微信小程序原生組件swiper實(shí)現(xiàn)。 ...

    rickchen 評(píng)論0 收藏0

  • 實(shí)現(xiàn)微信小程序下面商品左右滑動(dòng)上面tab也跟隨變動(dòng)功能

    　　現(xiàn)在就是要求在小程序下面商品左右滑動(dòng)上面tab也跟隨變動(dòng)功能　　點(diǎn)擊tab切換下面的上面信息，商品左右滑動(dòng)切換上面的tab分類　　功能描述：點(diǎn)擊tab切換下面的商品信息；滑動(dòng)下面的商品信息tab也進(jìn)行切換?！　〉谝徊剑何覀兿葋碚f一下上面的tab,tab我們使用scroll-view scroll-x="true" 就可以。　　<scroll-viewclass=&qu...

    3403771864 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<