mpvue使用scroll-view

mpvue 使用方法

注意点 
1.<scroll-view :style="{'height': '300px'}"></scroll-view>要设置高度 
2. 举例：小程序原先方法是bindscrolltolower，在mpvue当中要写成@scrolltolower

template 部分

<scroll-view  :style="{'height': '300px'}" :scroll-y="true" @scrolltolower="scrolltolower" @scroll="scroll" >
  <div :style="{'height': '200px','background-color':'red'}">tyuiolpo</div>
  <div class=""  :style="{'height': '200px','background-color':'red'}">dsdsd
  </div><div class=""  :style="{'height': '200px','background-color':'red'}">grytyju</div>
</scroll-view> 

	
<li style="box-sizing:border-box;outline:0px;padding:0px 8px;margin:0px;list-style:none;word-break:break-all;color:#999999;">
	1
</li>

<li style="box-sizing:border-box;outline:0px;padding:0px 8px;margin:0px;list-style:none;word-break:break-all;color:#999999;">
	2
</li>

<li style="box-sizing:border-box;outline:0px;padding:0px 8px;margin:0px;list-style:none;word-break:break-all;color:#999999;">
	3
</li>

<li style="box-sizing:border-box;outline:0px;padding:0px 8px;margin:0px;list-style:none;word-break:break-all;color:#999999;">
	4
</li>

<li style="box-sizing:border-box;outline:0px;padding:0px 8px;margin:0px;list-style:none;word-break:break-all;color:#999999;">
	5
</li>

methods 部分

 methods: {
    scrolltolower(){
      console.log(7)
    },
    scroll(e) {
      console.log(6)
      console.log(e)
    },  

	 } 



	  



	

获取屏幕高度减去上层高度为内容滚动高度：

mounted(){
var that=this;
          wx.getSystemInfo({
            success: function(res) {
                console.log(res.model)
                console.log(res.pixelRatio)
                console.log(res.windowWidth)
                console.log(res.windowHeight);
that.scrollHeight=res.windowHeight-95;
                console.log(res.language)
                console.log(res.version)
            }
            })

       }

Links: 213