原生小程序|原生小程序之事件绑定（数据绑定）与事件传参下拉刷新、触底事件等 javascript|前端|小程序

【原生小程序|原生小程序之事件绑定（数据绑定）与事件传参下拉刷新、触底事件等】
目录

原生小程序之事件绑定与时间传参
- 事件绑定
- - 点击事件 bindtap
  - 数据的单向绑定与双向数据绑定
  - 数据双向绑定的限制（只能绑定一个值，对象的属性值不可绑定的）
  - 数据双向绑定的实现绑定对象的属性值
- 事件传参
- - 点击按钮，当前按钮给事件传递了参数info为2
  - input 事件拿到输入的值
下拉刷新、触底事件等
- 下拉刷新
- - 全局下拉刷新
  - 局部页面下拉刷新
- 上拉触底
- - 上拉触底案例
  - - test.wxml
    - test.js
  - test.wxss

原生小程序之事件绑定与时间传参事件绑定

文章图片

点击事件 bindtap

index.wxml

index.js

// pages/about/about.js Page({ data: { }, btn1(e){ console.log("点击事件",e); } })

数据的单向绑定与双向数据绑定

index.wxml

数据单向绑定 value -- {{ value }} 数据单向绑定 value2 -- {{ value2 }} 手动实现双向数据绑定数据双向绑定 value3 -- {{ value3 }}

index.js

// pages/about/about.js Page({ data: { value:1, value2:2, value3:3 }, // 单向数据绑定的时候手动实现数据双向绑定 input1Change(e){ // console.log("input1Change",e,e.detail.value); this.setData({ value2:e.detail.value }) } })

index.wxss

input { border: 1px solid #ccc; }

效果

文章图片

数据双向绑定的限制（只能绑定一个值，对象的属性值不可绑定的）

index.wxml

obj {{ obj.age }} - {{ obj.value}} value - {{ value }}

index.js

// pages/about/about.js Page({ data: { obj:{ value:1, age:10 }, value:0 }, })

效果

文章图片

数据双向绑定的实现绑定对象的属性值

index.wxml

obj{{ obj.value}} - {{ obj.age }}

index.js

// pages/about/about.js Page({ data: { obj:{ value:1, age:0 }, }, onInput(e){ let value = https://www.it610.com/article/e.detail.value; let tag = e.currentTarget.dataset.tag; if(value){ let _target = `obj.${tag}` this.setData({ [_target] : value }) } }, inputAge(e){ let value = e.detail.value; let tag = e.currentTarget.dataset.tag; if(value){ let _target = `obj.${tag}` this.setData({ [_target] : value }) } }, })

效果

文章图片

事件传参点击按钮，当前按钮给事件传递了参数info为2

index.wxml

value- {{ value }} 按钮

index.js

// pages/about/about.js Page({ data: { value:0 }, btn1(e){ console.log("事件传递的参数",e.target.dataset.info); // 2 this.setData({ value:this.data.value + e.target.dataset.info }) } })

效果
- 点击按钮的时候 value + 2

input 事件拿到输入的值

index.wxml

value- {{ value }}

index.js

// pages/about/about.js Page({ data: { value:1 }, ipt(e){ console.log("事件传递的参数",e.detail.value); this.setData({ value: e.detail.value }) } })

下拉刷新、触底事件等下拉刷新全局下拉刷新

不推荐使用
文章图片

局部页面下拉刷新

推荐使用
文章图片
下拉刷新样式配置

{ "usingComponents": {}, "enablePullDownRefresh": true, "backgroundColor": "#010101", "backgroundTextStyle": "light" }

下拉刷新事件

onPullDownRefresh(){ console.log("下拉刷新"); }

停止下拉刷新

onPullDownRefresh(){ console.log("下拉刷新"); wx.stopPullDownRefresh({ // 关闭下拉刷新 success: (res) => {}, }) }

上拉触底

上拉触底函数

onReachBottom(){ console.log("上拉触底"); // 节流限制请求 }

上拉触底距离配置 XXpage.json

{ "onReachBottomDistance": 100 }

上拉触底案例
test.wxml

{{item }} 数据就只有这么多了

test.js

// pages/test/test.js Page({/** * 页面的初始数据 */ data: { showArr:[], page:1, isLoading:false, // 是否可以发起请求节流阀 noMoreDadaFlag:false, // 数据只有这么多了 }, onLoad(options){ console.log("about-options",options); this.getShowArr(this.data.page) }, getShowArr(page){ this.setData({ isLoading:true, noMoreDadaFlag:false }) wx.showLoading({ title: '数据加载中。。。', }) // wx.request({ //url: 'url', //method:'GET', //success:(res)=>{ //console.log(res); //}, //// 请求需要再这边关闭loading //complete:()=>{ //wx.hideLoading({ //success: (res) => {}, //}) //} // }) console.log("page",page); if ( page == 1) { this.setData({ showArr:[1,2,3,4,5,6,7,8,9,10] }) wx.hideLoading() this.setData({ isLoading:false, }) } else if ( page == 2 ) { let arr = [11,12,13,14,15,16,17,18,19,20] this.setData({ showArr:[...this.data.showArr,...arr] }) wx.hideLoading() this.setData({ isLoading:false, }) } else if ( page >= 3 ) { this.setData({ noMoreDadaFlag:true }) wx.hideLoading() this.setData({ isLoading:false, }) } }, // 上拉触底节流限制请求 onReachBottom(){ if ( this.data.isLoading ) return ; // 再节流状态 // 否则就发起请求 this.setData({ page: this.data.page + 1 }) this.getShowArr(this.data.page); } })

test.wxss