本文实例讲述了微信小程序实现偷窃者切换卡内嵌滚动条不显示的方法。分享给大家供大家参考,具体如下:
index.wxml文件:
& lt;视图类=皊wiper-tab”比;
& lt;视图类=" swiper-tab-item {{currentTab==0 & # 63;“在”:“}}”数据流=" 0 " bindtap=皊wichNav”在为你推荐& lt;/view>
& lt;视图类=" swiper-tab-item {{currentTab==1 & # 63;“在”:“}}”数据流=?”bindtap=皊wichNav”在新品上架& lt;/view>
& lt;视图类=" swiper-tab-item {{currentTab==2 & # 63;“在”:“}}”数据流=?”bindtap=皊wichNav”在最热商品& lt;/view>
& lt;/view>
& lt;偷窃者电流=" {{currentTab}}”类=皊wiper-box”持续时间=" 300 " bindchange=癰indchange”比;
& lt; swiper-item>
& lt;滚动视图scroll-y="{{真}}”在
& lt;视图风格=身高:200 px的在为你推荐& lt;/view>
& lt;视图风格=身高:200 px的在为你推荐& lt;/view>
& lt;视图风格=身高:200 px的在为你推荐& lt;/view>
& lt;视图风格=身高:200 px的在为你推荐& lt;/view>
& lt;视图风格=身高:200 px的在为你推荐& lt;/view>
& lt;/scroll-view>
& lt;/swiper-item>
& lt; swiper-item>
& lt; view>新品上架& lt;/view>
& lt;/swiper-item>
& lt; swiper-item>
& lt; view>最热商品& lt;/view>
& lt;/swiper-item>
& lt;/swiper>
之前
index.wxss文件:
/* * index.wxss * */.userinfo {
显示:flex;
flex-direction:列;
对齐项目:中心;
}
.userinfo-avatar {
宽度:128 rpx;
身高:128 rpx;
保证金:20 rpx;
这个特性:50%;
}
.userinfo-nickname {
颜色:# aaa级;
}
.usermotto {
margin-top: 200 px;
}
.swiper-tab {
宽度:100%;
text-align:中心;
行高:80 rpx;
margin-top: 10 rpx;
margin-bottom: 20 rpx;
}
.swiper-tab-item {
字体大小:30 rpx;
显示:inline-block;
宽度:33.33%;
颜色:# 666;
}
碧绿{
颜色:# FEA611;
边界底部:5 rpx固体# FEA611;
}
.swiper-box {
显示:块;
高度:100%;
宽度:100%;
溢出:隐藏;
}
{.swiper-box视图
text-align:中心;
}
之前
index.js文件:
//获取应用实例
const应用=getApp ()
页面({
数据:{
座右铭:“Hello World”,
用户信息:{},
hasUserInfo:假的,
canIUse: wx.canIUse (“button.open-type.getUserInfo”),
clientWidth: 0,
clientHeight: 0,//选项卡切换
currentTab: 0
},//事件处理函数
bindViewTap:函数(){
wx.navigateTo ({
url:“. ./日志/日志”
})
},
onLoad:函数(){
var=这个;
wx.getSystemInfo ({
成功:函数(res) {
that.setData ({
clientHeight: res.windowHeight
});
}
});
如果(app.globalData.userInfo) {
this.setData ({
用户信息:app.globalData.userInfo,
hasUserInfo:真
})
}else if (this.data.canIUse) {//由于getUserInfo是网络请求,可能会在页面。onLoad之后才返回//所以此处加入回调以防止这种情况
app.userInfoReadyCallback=res=比;{
this.setData ({
用户信息:res.userInfo,
hasUserInfo:真
})
}
其他}{//在没有开式=getUserInfo版本的兼容处理
wx.getUserInfo ({
成功:res=比;{
app.globalData。用户信息=res.userInfo
this.setData ({
用户信息:res.userInfo,
hasUserInfo:真
})
}
})
}
},
getUserInfo:函数(e) {
console.log (e)
app.globalData。用户信息=e.detail.userInfo
this.setData ({
用户信息:e.detail.userInfo,
hasUserInfo:真
})
},
bindChange:函数(e) {
var=这个;
那setData ({currentTab: e.detail.current});
},
swichNav:函数(e) {
var=这个;
如果(this.data。currentTab===e.target.dataset.current) {
返回错误;
其他}{
that.setData ({
currentTab: e.target.dataset.current
})
}
}
})
之前
希望本文所述对大家微信小程序开发有所帮助。
