<span id="mktg5"></span>

<i id="mktg5"><meter id="mktg5"></meter></i>

        <label id="mktg5"><meter id="mktg5"></meter></label>
        最新文章專題視頻專題問答1問答10問答100問答1000問答2000關(guān)鍵字專題1關(guān)鍵字專題50關(guān)鍵字專題500關(guān)鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關(guān)鍵字專題關(guān)鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
        問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
        當(dāng)前位置: 首頁(yè) - 科技 - 知識(shí)百科 - 正文

        微信小程序?qū)崿F(xiàn)swiper切換卡內(nèi)嵌滾動(dòng)條不顯示的方法示例

        來源:懂視網(wǎng) 責(zé)編:小采 時(shí)間:2020-11-27 22:02:32
        文檔

        微信小程序?qū)崿F(xiàn)swiper切換卡內(nèi)嵌滾動(dòng)條不顯示的方法示例

        微信小程序?qū)崿F(xiàn)swiper切換卡內(nèi)嵌滾動(dòng)條不顯示的方法示例:本文實(shí)例講述了微信小程序?qū)崿F(xiàn)swiper切換卡內(nèi)嵌滾動(dòng)條不顯示的方法。分享給大家供大家參考,具體如下: index.wxml文件: <view class=swiper-tab> <view class=swiper-tab-item {{currentTab==0 ? 'o
        推薦度:
        導(dǎo)讀微信小程序?qū)崿F(xiàn)swiper切換卡內(nèi)嵌滾動(dòng)條不顯示的方法示例:本文實(shí)例講述了微信小程序?qū)崿F(xiàn)swiper切換卡內(nèi)嵌滾動(dòng)條不顯示的方法。分享給大家供大家參考,具體如下: index.wxml文件: <view class=swiper-tab> <view class=swiper-tab-item {{currentTab==0 ? 'o

        本文實(shí)例講述了微信小程序?qū)崿F(xiàn)swiper切換卡內(nèi)嵌滾動(dòng)條不顯示的方法。分享給大家供大家參考,具體如下:

        index.wxml文件:

        <view class="swiper-tab">
         <view class="swiper-tab-item {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">為你推薦</view>
         <view class="swiper-tab-item {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">新品上架</view>
         <view class="swiper-tab-item {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">最熱商品</view>
        </view>
        <swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{clientHeight?clientHeight-'40'+'px':'auto'}}" bindchange="bindChange" >
         <swiper-item>
         <scroll-view scroll-y="{{true}}" style="height: {{clientHeight?clientHeight+'px':'auto'}}">
         <view style='height:200px'>為你推薦</view>
         <view style='height:200px'>為你推薦</view>
         <view style='height:200px'>為你推薦</view>
         <view style='height:200px'>為你推薦</view>
         <view style='height:200px'>為你推薦</view>
         </scroll-view>
         </swiper-item>
         <swiper-item>
         <view>新品上架</view>
         </swiper-item>
         <swiper-item>
         <view>最熱商品</view>
         </swiper-item>
        </swiper>
        
        

        index.wxss文件:

        /**index.wxss**/
        .userinfo {
         display: flex;
         flex-direction: column;
         align-items: center;
        }
        .userinfo-avatar {
         width: 128rpx;
         height: 128rpx;
         margin: 20rpx;
         border-radius: 50%;
        }
        .userinfo-nickname {
         color: #aaa;
        }
        .usermotto {
         margin-top: 200px;
        }
        .swiper-tab {
         width: 100%;
         text-align: center;
         line-height: 80rpx;
         margin-top:10rpx;
         margin-bottom: 20rpx;
        }
        .swiper-tab-item {
         font-size: 30rpx;
         display: inline-block;
         width: 33.33%;
         color: #666;
        }
        .on {
         color: #FEA611;
         border-bottom: 5rpx solid #FEA611;
        }
        .swiper-box {
         display: block;
         height: 100%;
         width: 100%;
         overflow: hidden;
        }
        .swiper-box view {
         text-align: center;
        }
        
        

        index.js文件:

        //獲取應(yīng)用實(shí)例
        const app = getApp()
        Page({
         data: {
         motto: 'Hello World',
         userInfo: {},
         hasUserInfo: false,
         canIUse: wx.canIUse('button.open-type.getUserInfo'),
         clientWidth: 0,
         clientHeight: 0,
         // tab切換
         currentTab: 0
         },
         //事件處理函數(shù)
         bindViewTap: function () {
         wx.navigateTo({
         url: '../logs/logs'
         })
         },
         onLoad: function () {
         var that = this;
         wx.getSystemInfo({
         success: function (res) {
         that.setData({
         clientHeight: res.windowHeight
         });
         }
         });
         if (app.globalData.userInfo) {
         this.setData({
         userInfo: app.globalData.userInfo,
         hasUserInfo: true
         })
         } else if (this.data.canIUse) {
         // 由于 getUserInfo 是網(wǎng)絡(luò)請(qǐng)求,可能會(huì)在 Page.onLoad 之后才返回
         // 所以此處加入 callback 以防止這種情況
         app.userInfoReadyCallback = res => {
         this.setData({
         userInfo: res.userInfo,
         hasUserInfo: true
         })
         }
         } else {
         // 在沒有 open-type=getUserInfo 版本的兼容處理
         wx.getUserInfo({
         success: res => {
         app.globalData.userInfo = res.userInfo
         this.setData({
         userInfo: res.userInfo,
         hasUserInfo: true
         })
         }
         })
         }
         },
         getUserInfo: function (e) {
         console.log(e)
         app.globalData.userInfo = e.detail.userInfo
         this.setData({
         userInfo: e.detail.userInfo,
         hasUserInfo: true
         })
         },
         bindChange: function (e) {
         var that = this;
         that.setData({ currentTab: e.detail.current });
         },
         swichNav: function (e) {
         var that = this;
         if (this.data.currentTab === e.target.dataset.current) {
         return false;
         } else {
         that.setData({
         currentTab: e.target.dataset.current
         })
         }
         }
        })
        
        

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

        聲明:本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí),若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

        文檔

        微信小程序?qū)崿F(xiàn)swiper切換卡內(nèi)嵌滾動(dòng)條不顯示的方法示例

        微信小程序?qū)崿F(xiàn)swiper切換卡內(nèi)嵌滾動(dòng)條不顯示的方法示例:本文實(shí)例講述了微信小程序?qū)崿F(xiàn)swiper切換卡內(nèi)嵌滾動(dòng)條不顯示的方法。分享給大家供大家參考,具體如下: index.wxml文件: <view class=swiper-tab> <view class=swiper-tab-item {{currentTab==0 ? 'o
        推薦度:
        標(biāo)簽: 微信小程序 的辦法 示例
        • 熱門焦點(diǎn)

        最新推薦

        猜你喜歡

        熱門推薦

        專題
        Top
        主站蜘蛛池模板: 好吊妞在线成人免费| 成人免费午夜无码视频| 免费国产不卡午夜福在线 | 2020久久精品国产免费| 亚洲av网址在线观看| 亚洲制服丝袜一区二区三区| 亚洲av无码日韩av无码网站冲| 好男人资源在线WWW免费| 免费国产小视频在线观看| 国产亚洲人成在线影院| 免费人成网站7777视频| 校园亚洲春色另类小说合集| 一区二区三区四区免费视频| 亚洲精品国精品久久99热一| 亚洲国产精品免费观看| 妞干网手机免费视频| 美国毛片亚洲社区在线观看| 亚洲欧洲中文日韩av乱码| 中文字幕免费在线看电影大全| 亚洲欧洲成人精品香蕉网| 成人电影在线免费观看| 亚洲视频免费一区| 成人免费午夜在线观看| 亚洲av无码专区青青草原| 亚洲美女高清一区二区三区 | 成年人网站免费视频| 精品亚洲国产成人av| 亚洲综合最新无码专区| 久久99精品免费视频| 亚洲欧洲免费无码| 国产成人亚洲综合| 18禁美女裸体免费网站| 亚洲爱情岛论坛永久| 无码中文在线二区免费| 国产亚洲女在线线精品| 亚洲国产日韩一区高清在线| 久久免费国产精品| 免费很黄很色裸乳在线观看| 久久青草免费91线频观看站街| 亚洲一区二区三区在线网站| 亚洲性日韩精品国产一区二区|