|
作者:YangAlas ,來(lái)自github
配合閱讀文章:跳坑《一百一十三》組件系列:scroll-view scroll-view的高度問(wèn)題有時(shí)候會(huì)遇見(jiàn)一個(gè)功能需求,就是在整個(gè)可視窗口需要有一個(gè)滾動(dòng)區(qū)域,而我們給scroll-view設(shè)置高度為100%時(shí),然并卵...官方是這樣說(shuō)的
測(cè)試?yán)?/h4>
可以看出設(shè)置100%的高度無(wú)效 獲取視口高度,然后綁定數(shù)據(jù)到scroll-view上``` 行內(nèi)樣式 綁定獲取到的視口高度 {{item}} ```
onLoad: function () {
console.log('onLoad')
var that = this
wx.getSystemInfo({
success: function(res) {
console.log(res)
console.log(res.windowHeight)
that.setData({
wHeight: res.windowHeight
})
}
})
}
scroll-into-view模擬樓層跳轉(zhuǎn)
<view class="page">
<view class="head"></view>
<view class="container">
<!--左側(cè)菜單 -->
<scroll-view class="left" scroll-y="true">
<block wx:for="{{shopList}}" wx:key="title">
<view class="menu" data-id="{{index}}" bindtap="tapClassify">{{item.title}}</view>
</block>
</scroll-view>
<!--右側(cè)內(nèi)容區(qū)域 -->
<scroll-view class="right" scroll-y=" true" scroll-into-view="x{{classifyViewed}}" bindscroll="onGoodsScroll">
<block wx:for = "{{goodList}}" wx:key="title">
<view class="item" id="x{{index}}">{{item.text}}</view>
</block>
</scroll-view>
</view>
</view>
.head{
width: 100%;
height: 100rpx;
background: #e8e7e6;
}
.container{
display: -webkit-flex;
background: #e8e7e6;
color:#0b0c0c;
font-family: "微軟雅黑";
font-size: 14px;
}
.left{
width: 180rpx;
height: 800rpx;
background: e8e7e6;
}
.right{
height: 800rpx;
background: #f5f5f5;
}
.menu{
width: 100%;
height: 60rpx;
background: #bcd3d9;
margin-bottom: 10rpx;
}
.item{
width: 100%;
height: 400rpx;
background: #7da9b0;
margin-bottom: 10rpx;
line-height: 400rpx;
text-align: center;
}
data: {
classifyViewed: '',
shopList:[
{
title: '男裝'
},
{
title: '女裝'
},
{
title: '童裝'
},
{
title: '男鞋'
},
{
title: '睡衣'
},
{
title: '襯衫'
},
{
title: '帽子'
}
],
goodList: [
{
text : '1樓內(nèi)容男裝'
},
{
text : '2樓內(nèi)容女裝'
},
{
text : '3樓內(nèi)容童裝'
},
{
text : '4樓內(nèi)容男鞋'
},
{
text : '5樓內(nèi)容睡衣'
},
{
text : '6樓內(nèi)容襯衫'
},
{
text : '7樓內(nèi)容帽子'
}
]
},
tapClassify: function (e) {
var id =e.target.dataset.id;
console.log(id);
this.setData({
classifyViewed: id
});
console.log(this.data.classifyViewed)
}
有其他scroll-view問(wèn)題,后更.... |