本文实例讲述了微信小程序实现捣蛋鬼切换卡内嵌滚动条不显示的方法。分享给大家供大家参考,具体如下:
index.wxml文件:
view class=' swiper-tab ' view class=' swiper-tab-item { { CurrentTab==0?在“:”} }”数据上-当前=“0”绑定tap=“Swichnav”为你推荐/view view class=' swiper-tab-item { { CurrentTab==1 '?在“:”} }”数据上-当前=“1”绑定tap=“Swichnav”新品上架/view view class=' swiper-tab-item { { CurrentTab==2 '?在“:”} }“data-current=‘2’bind tap=‘Swichnav’上最热商品/view/view swiper current=' { { CurrentTab } } ' class=' swiper-box ' duration=' 300 ' style=' height : { { client height?客户端高度-' 40 ' ' px ' : ' auto ' } } ' bind change=' bind change ' swiper-item scroll-view scroll-y=' { { true } } ' style=' height : { { client height?clientHeight 'px':'auto'} '视图样式='height:200px '为你推荐/view view style=' height :200 px '为你推荐/view view style=' height :200 px '为你推荐/view view style=' height :200 px '为你推荐/view view style=' height :200 px '为你推荐/view/scroll-view/swiper-item swiper-item视图新品上架/view /swiper-item swiper-item视图最热商品/view/swiper-item/swiperindex。页面样式表文件:
/**index.wxss**/.user info { display : flex flex-direction :柱;align-items:居中;}.用户信息-头像{ width : 128 rpx高度: 128rpxmargin: 20rpx边界半径: 50%;}.用户信息-昵称{ color: # aaa}。用户座右铭{页边距-top : 200 px;}.swiper-tab { width : 100%;文本对齐:中心;线高: 80 rpx页边距-top :10 rpx;保证金-底部: 20 rpx}.swiper-tab-item { font-size : 30 rpx;显示器:内联块;宽度: 33.33%;color: # 666}。在{ color: # FEA611边框-bottom: 5rpx实心# FEA611}。swiper-box { display : block;高度: 100%;宽度: 100%;飞越:隐藏;}.开关盒视图{ text-align :居中;}index.js文件:
//获取应用实例const app=GetApp()Page({ data : {座右铭: ' Hello World ',userinfo : }),hasUserInfo: false,canuses : wx。可以使用('按钮。开放式。getuserinfo '),客户端宽度: 0 0,客户端高度: 0 0,//选项卡切换currentTab: 0 },//事件处理函数bindViewTap:函数(){ wx。导航到({ URL : './logs/logs' }) },onLoad:函数(){ var即=thiswx。getsystem info({ success : function(RES){ that。setdata({客户端高度: RES . window height });} });if(app。全球数据。userinfo){这个。setdata({ userinfo : app。全球数据。userinfo,hasuserinfo : true })else if(这个。数据。CAniuse){//由于户信息是网络请求,可能会在Page.onLoad之后才返回//所以此处加入回收以防止这种情况app。用户inforeadycallback=RES={ this。setdata({ user info : RES . user info,hasuser info : true })} } else {//在没有开放类型=getUserInfo版本的兼容处理wx。getuser info({ success : RES={ app。全球数据。userinfo=RES . userinfo这个。setdata({ user info : RES . user info,hasUserInfo: true })})}),getuserinfo :函数(e){ console。日志应用程序。全球数据。userinfo=e . detail。用户信息这个。setdata({ userinfo : e . detail。userinfo,hasuserinfo : truethat。setdata({当前ttab : e . detail。当前});},swichNav:函数{ var即=thisif(this。数据。当前选项卡===e . target。数据集。当前){ return false}否则{那。setdata({当前选项卡: e . target。数据集。当前})} })希望本文所述对大家微信小程序开发有所帮助。