微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
程序员文章站
2022-07-06 12:10:09
本文实例讲述了微信小程序实现swiper切换卡内嵌滚动条不显示的方法。分享给大家供大家参考,具体如下:
index.wxml文件:
本文实例讲述了微信小程序实现swiper切换卡内嵌滚动条不显示的方法。分享给大家供大家参考,具体如下:
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文件:
//获取应用实例 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 }, //事件处理函数 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 是网络请求,可能会在 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 }) } } })
希望本文所述对大家微信小程序开发有所帮助。
上一篇: Linux中常用来查看进程的命令PS
下一篇: 【安装配置Redis】