作者:YangAlas ,來(lái)自github
配合閱讀文章:跳坑《一百一十三》組件系列:scroll-view scroll-view的高度問題有時(shí)候會(huì)遇見一個(gè)功能需求,就是在整個(gè)可視窗口需要有一個(gè)滾動(dòng)區(qū)域,而我們給scroll-view設(shè)置高度為100%時(shí),然并卵...官方是這樣說的
測(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問題,后更.... |
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)