<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
        主站蜘蛛池模板: 成年美女黄网站18禁免费| 免费在线观看亚洲| 免费播放一区二区三区| 亚洲日韩精品射精日| 成人妇女免费播放久久久| 国产亚洲精久久久久久无码AV| 美女视频黄频a免费大全视频| 免费一级做a爰片久久毛片潮喷| 亚洲欧美aⅴ在线资源| 国产高清在线免费| 大陆一级毛片免费视频观看| 久久亚洲AV永久无码精品| 一级一级一片免费高清| 亚洲精品无码永久在线观看你懂的 | 一级毛片在线免费视频| 日批日出水久久亚洲精品tv| 一区二区三区视频免费| av无码国产在线看免费网站| 亚洲色精品VR一区区三区| 日韩高清在线免费看| 亚洲视频一区调教| 91在线视频免费播放| 亚洲欧美成人一区二区三区| 亚洲日韩精品无码专区网站| 日韩精品无码免费专区午夜| 亚洲欧洲综合在线| 国产免费人成视频在线观看| 久久一区二区免费播放| 亚洲福利视频一区二区三区| 免费观看男人免费桶女人视频| a免费毛片在线播放| 亚洲情a成黄在线观看动漫尤物| 免费观看黄网站在线播放| 人妻仑刮八A级毛片免费看| 亚洲AV日韩精品久久久久| 希望影院高清免费观看视频| 特级毛片免费播放| 精品亚洲aⅴ在线观看| 国产性生交xxxxx免费| 免费精品一区二区三区第35| 亚洲熟女综合一区二区三区|