欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例

程序员文章站 2022-03-24 13:01:49
本文实例讲述了微信小程序实现swiper切换卡内嵌滚动条不显示的方法。分享给大家供大家参考,具体如下: index.wxml文件:

本文实例讲述了微信小程序实现swiper切换卡内嵌滚动条不显示的方法。分享给大家供大家参考,具体如下:

微信小程序实现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
   })
  }
 }
})

希望本文所述对大家微信小程序开发有所帮助。