首先,我们在本地先放上一张图片(index.png)
图中每个模块的高度应该是Demo的高度=图片的高度+文字描述内容节点高度+maigin-bottom
知道高度的计算之后就好办了
微信小程序Page中的onPageScroll方法直接提供了监听页面滑动距离的方法
用本地的图片形成一个占位符效果,然后由arry中对应下标的false和true来控制image 标签的路径是本地的还是imgUrls中的,然后在onPageScroll中,用屏幕滑动的距离/Demo的高度,在取整,得到的整数就是arry中需要变成true的下标
page({
data:{
damoHeight: '100',//demo高度
imgUrls: [
//图片地址 {
url: 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg' },
{ url: 'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg' } ],
arry:[false,false], },
onPageScroll: function (res) {
var _this = this; //console.log(res.scrollTop);
var str = parseInt(res.scrollTop / _this.data.damoHeight);
_this.data.arry[str] = true;
_this.setData({ arry:_this.data.arry
})
}})
wxml中这样写
<image src="{{arry[index] ? imgUrls[index].url: 'index.png'}}"></image>
image{
opacity: 0;
width: 100%;
height: 70%;
transition: opacity 1s linear 2s;
}
.Action{
opacity: 1;
}
简单的淡入淡出