微信小程序 实现注册协议滚动置底部 显示按钮状态

引言

网络软件的软件协议，用户协议等相关协议的认可，防止以及保护个人或公司权益。

准备工作

原生微信小程序

实现步骤

创建注册协议页面

创建 wxml 文件，编写注册协议内容

创建 wxss 文件，设置页面样式

添加滚动事件

在 wxml 文件中添加 scroll-view 组件

在 js 文件中监听滚动事件 【scrolltolower】

判断滚动位置

获取滚动位置

判断是否滚动到底部

显示按钮状态

在 wxml 文件中添加按钮

在 js 文件中控制按钮的显示状态

代码示例

wxml

<view class="qyinfo-box">
    <scroll-view class="scroll-view" scroll-y bindscrolltolower="scrolltolower">
        <rich-text nodes="{{content}}"></rich-text>
    </scroll-view>
    <button disabled="{{canagree == true}}" bindtap="agree">同意并继续</t-button>
</view>

json

{
  "component": true,
  "usingComponents": {}
}

js

Component({
  behaviors: [],
  properties: {

  },
  data: {
    content: '',// 协议内容
    canagree:true,// 是否滚动置底关联按钮状态 false 可以点击 true 禁止点击
  },
  lifetimes: {
    created() {},
    attached() {},
    moved() {},
    detached() {},
  },
  methods: {
    scrolltolower() {
      this.setData({
        canagree:false
      })
    }
  },
});