小程序模板網(wǎng)

github精選:微信小程序入坑指南:scroll-view

發(fā)布時(shí)間:2018-04-14 14:33 所屬欄目:小程序開發(fā)教程

scroll-view的高度問題

有時(shí)候會(huì)遇見一個(gè)功能需求,就是在整個(gè)可視窗口需要有一個(gè)滾動(dòng)區(qū)域,而我們給scroll-view設(shè)置高度為100%時(shí),然并卵...官方是這樣說的

測(cè)試?yán)?/h4>
  • 設(shè)置scroll-view高度為100%;
結(jié)構(gòu)用列表渲染
 data: {
    text: [
      1,2,3,4,5,6,7,8,9,10
    ]
  }

<!--wxml-->
 <view class="page">
  <scroll-view class="scrollView" scroll-y="true">
    <block wx:for="{{text}}" key:for="{{item}}">
      <view class="item">{{item}}</view>
    </block>
  </scroll-view>
</view>
/*wxss*/
 .scrollView{
  height: 100%;   // 設(shè)置scroll-view的高度為100%;
  width: 500rpx;
  background: grey;
}
.item{
  width: 100%;
  height: 150rpx;
  background: #f5f5f5;
  margin-bottom: 20rpx;
}

可以看出設(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問題,后更....



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉(cāng)庫(kù):starfork
本文地址:http://22321a.com/wxmini/doc/course/23373.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢