手把手教你写一个小程序图片懒加载bindload，提示文字页面滚动消失（onPageScroll），停止出现（附源码），滑动到底部事件onReachBottom

今天接到需求需要在小程序上写个协议加载的页面
需求1.协议分成15张图片加载需要加载动画
2.滑动页面提示文字消失
3.滑动到底部按钮可以点击

wxml部分

<view>
    <image wx:for="{{imgUrls}}" wx:key="item" src="{{arry[index] ? imgUrls[index].url: ''}}" class=" pic {{arry[index] ?'Action':''}}" bindload="imageLoad"></image>
    <view wx:if='{{show}}'>
        <image class="tip" src="/img/tip.png"></image>
        <view class="tip-text">阅读至底部方可点击确认</view>
    </view>

    <view class="btn {{ curpage > 1 ? 'color' :'' }}"  bindtap="{{ curpage > 1 ? 'submit' : '' }}" >我已确认以上协议的签署</view>
</view>
<!-- 弹窗 -->
<view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" wx:if="{{showModal}}"></view>
<view class="modal-dialog" wx:if="{{showModal}}">
    <view class="code-text">验证码将发送至：134****1223</view>
    <view class="dialog-next">
        <input type="number" class="dialog-inp" placeholder="请输入验证码" value="{{code}}" bindinput="codeChange" ></input>
        <view class="dialog-btn {{codetxt == '重新发送' ? 'color' : ''}}" bindtap="{{ codetxt == '重新发送' ? 'countDown' : '' }}">{{codetxt}}</view>
    </view>
    <view class="modal-footer">
        <view class="btn-cancel" bindtap="onCancel" data-status="cancel">取消</view>
        <view class="btn-confirm {{ code ? 'color' :'' }}" bindtap="{{code ? 'onConfirm' : ''}}" data-status="confirm">完成签署</view>
    </view>
</view>

wxss部分

.pic {
  opacity: 0;
  width: 100%;
  height: 300px;
  transition: opacity 0.4s linear 0.4s;
}
 
.Action {
  opacity: 1;
}
.btn{
    position: fixed;
    bottom: 0;
    width:100%;
    text-align: center;
    height:100rpx;
    line-height: 100rpx;
    background-color: #e5e5e5;
    border-radius: 0;
    color:#999999;
    font-size: 36rpx;
}
.tip{
    width: 404rpx;
    height:116rpx;
    margin: 0 auto;
    position: fixed;
    bottom:120rpx;
    left:50%;
    margin-left: -202rpx;
}
.tip-text{
    color:#ffffff;
    font-size: 28rpx;
    position: fixed;
    bottom:168rpx;
    text-align: center;
    left: 50%;
    margin-left: -126rpx;
}
/* dialog */
.modal-mask {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.5;
  overflow: hidden;
  z-index: 9000;
  color: #fff;
}

.modal-dialog {
  width: 540rpx;
  overflow: hidden;
  position: fixed;
  top: 50%;
  left: 0;
  z-index: 9999;
  background: #f9f9f9;
  margin: -180rpx 105rpx;
  border-radius: 16rpx;
}

.modal-title {
  padding: 44rpx 32rpx;
  font-size: 36rpx;
  line-height: 50rpx;
  color: #333;
  text-align: center;
}
.modal-footer {
  display: flex;
  flex-direction: row;
  height: 86rpx;
  border-top: .5px solid #dedede;
  font-size: 34rpx;
  line-height: 86rpx;
}

.btn-cancel {
  width: 50%;
  color: #666;
  text-align: center;
  border-right: 1px solid #dedede;
}
.dialog-next{
    display: flex;
    height: 80rpx;
    margin: 48rpx;
}
.dialog-inp{
    width: 304rpx;
    height: 80rpx;
    font-size: 28rpx;
    border: 1px solid #ccc;
    text-indent: 16rpx;
    padding-left: 16rpx;
}
.dialog-btn{
    width: 160rpx;
    height: 85rpx;
    line-height: 85rpx;
    text-align: center;
    background-color: #e5e5e5;
    font-size: 28rpx;
    color: #ffffff;
    margin-left: -5rpx;
}
.code-text{
    font-size: 28rpx;
    color: #999999;
    margin: 48rpx 48rpx 0 48rpx;
}

.btn-confirm {
  width: 50%;
  background-color: #e5e5e5;
  text-align: center;
  color: #ffffff;
}
.color{
    background-color:#FF4800;
    color:#ffffff;
}

js部分

const utils = require('../../utils/util.js');
const app = getApp();
let timer = null
Page({
    data: {
        curpage:1,
        code:null,
        showModal: false,
        show: true,
        scrollTop: '',
        scrollIng: false,
        codetxt: '10S',
        damoHeight: '150',//demo高度
        imgUrls: [//图片地址
            {
                url: 'http://g.ydbcdn.com/site/imgs/1.png'
            }, {
                url: 'http://g.ydbcdn.com/site/imgs/2.png'
            },
            {
                url: 'http://g.ydbcdn.com/site/imgs/3.png'
            }, {
                url: 'http://g.ydbcdn.com/site/imgs/4.png'
            }
        ],
        arry: [false, false, false, false],

    },
    // 页面滚动
    onPageScroll: function (res) {
        this.setData({
            scrollTop: res.scrollTop,
            show: false
        })
        let timer = setTimeout(() => {
            if (this.data.scrollTop === res.scrollTop) {
                this.setData({
                    scrollTop: res.scrollTop,
                    show: true
                })
                console.log('滚动结束')
                clearTimeout(timer)
            }
        }, 300)
        // console.log(res)
        var _this = this;
        var str = parseInt(res.scrollTop / _this.data.damoHeight);
        _this.data.arry[str] = true;
        _this.setData({
            arry: _this.data.arry
        })
    },
    submit:function(){
        this.countDown();
        this.setData({
            showModal:true
        })
    },
    imageLoad: function (e) {
        wx.hideLoading()
    },
    /**
    * 弹出框蒙层截断touchmove事件
    */
    preventTouchMove: function () {
    },
    /**
     * 隐藏模态对话框
     */
    hideModal: function () {
        this.setData({
            showModal: false
        });
    },
    /**
     * 对话框取消按钮点击事件
     */
    onCancel: function () {
        this.hideModal();
        this.setData({
            code:null
        })
    },
    /**
     * 对话框确认按钮点击事件
     */
    onConfirm: function () {
        this.hideModal();
        wx.navigateTo({
            url: '/pages/authorize/index',
        })
    },
    // 验证码
    countDown() {
        let time = 10
        timer = setInterval(() => {
            if (--time > 0) {
                this.setData({
                    codetxt: time + 's'
                })
            } else {
                this.setData({
                    codetxt: '重新发送'
                })
                clearInterval(timer)
                timer = null
            }
        }, 1000)
    },
    // 获取验证码value
    codeChange:function (e) {
        this.setData({
            code:e.detail.value
        })
    },
    onLoad: function () {
        wx.showLoading({
            title: '签约协议生成中',
        })
        let _this = this;
        let num = Math.ceil(wx.getSystemInfoSync().windowHeight / 300);
        for (let i = 0; i < num; i++) {
            _this.data.arry[i] = true;
        };
        this.setData({
            arry: _this.data.arry
        })
    },
    /**
  * 页面上拉触底事件的处理函数
  */
    onReachBottom: function () {
        console.log(++this.data.curpage);
        this.setData({
            curpage: ++this.data.curpage
        })
    },
})

觉得还用得着 需要调整的地方 可以微信咨询我18275201225