微信小程序开发week3

1.界面交互-loading提示框代码wx.showLoading({ // 用来显示提示的内容 title: 数据加载中..., // 是否展示透明蒙层防止透明穿透 mask:true })wx.request({ url:https://gmall-prod.atguigu.cn/mall-api/index/findBanner, method:GET, data:{}, header:{}, success:(res) { console.log(请求返回数据,res) if(res.data.code200){ this.setData({ list: res.data.data }) console.log(list赋值成功,this.data.list) } }, fail:(err) { console.log(请求失败,err) }, complete:(res) { // console.log(请求完成,res) // 关掉loading提示框 wx.hideLoading() } })注意2.界面交互-loading提示框-消息提示框代码sync deHandler(){ // showModal显示模态对话框 const {confirm} await wx.showModal({ title:提示, content:是否删除该商品 }) if (confirm) { // showToast消息提示框 wx.showToast({ title:删除成功, icon:none, duration:2000 }) }else{ wx.showToast({ title:取消删除, icon:error, duration:2000 }) } },3.本地存储代码// 将数据存储到本地 setStorage(){ // 第一个参数本地存储中指定的key // 第一个参数:需要存储的数据 // wx.setStorageSync(num,1) // wx.setStorageSync(obj,{name:tom,age:10}) // ------------------异步API------------------- wx.setStorage({ key:num, data:1 }) wx.setStorage({ key:obj, data:{name:tom1,age:10} }) }, // 获取本地数据 // 从本地存储的数据中获取指定key的数据内容 async getStorage(){ // const num wx.getStorageSync(num) // const obj wx.getStorageSync(obj) // console.log(num) // console.log(obj) // ------------------异步API------------------- const {data} await wx.getStorage({ key:obj }) console.log(data) }, // 删除本地数据 removeStorage(){ // 从本地移除存储指定key的数据内容 // wx.removeStorageSync(num) // ------------------异步API------------------- wx.removeStorage({ key:num }) }, // 清空本地全部数据 clearStorage(){ // wx.clearStorageSync() wx.clearStorage() } ,注意4.路由与通信代码navigateTo(){ // 保留当前页面跳转到应用中其它页面但不能跳转到toBar页面 wx.navigateTo({ url:/pages/list/list?id1nametom }) }, redirectTo(){ wx.redirectTo({ // 关闭销毁当前页面跳转到应用中其它页面但不能跳转到toBar页面 url:/pages/list/list?id1nametom }) }, switchTab(){ wx.switchTab({ // 跳转到toBar页面,不能跳转到非toBar页面路径后面不能传递参数 url:/pages/cate/cate }) }, reLaunch(){ wx.reLaunch({ // 关闭所有页面跳转到应用某个页面 url:/pages/list/list?id1nametom }) },5.页面处理函数-上拉加载代码// 监听用户上拉加载 onReachBottom(){ console.log(监听用户上拉加载) wx.showLoading({ title:数据加载中... }) setTimeout(() { // 当用户上拉加载时需要对数字进行累加每次累加三个数字 const lastNum this.data.numList[this.data.numList.length-1] const newArr [lastNum1,lastNum2,lastNum3] this.setData({ numList:[...this.data.numList,...newArr] }) wx.hideLoading() }, 1500); }6.页面处理函数-下拉刷新代码// 监听用户下拉刷新 onPullDownRefresh(){ // console.log(监听用户下拉刷新) this.setData({ numList:[1,2,3] }) // 在下拉刷新后 loading效果可能不会回弹回去 if(this.data.numList.length 3){ wx.stopPullDownRefresh() }7.增强scroll-view代码scroll-view scroll-y classscroll-y lower-threshold100 bindscrolltolowergetMore enable-back-to-toptrue refresher-enabled refresher-default-styleblack refresher-background#ccc bindrefresherrefreshrefreshHandler refresher-triggered{{isTriggered}} view wx:for{{numList}} wx:keythis {{item}}/view /scroll-view通用属性属性类型默认值必填说明最低版本scroll-xbooleanfalse否允许横向滚动1.0.0scroll-ybooleanfalse否允许纵向滚动1.0.0upper-thresholdnumber/string50否距顶部/左边多远时触发 scrolltoupper 事件1.0.0lower-thresholdnumber/string50否距底部/右边多远时触发 scrolltolower 事件1.0.0scroll-topnumber/string否设置竖向滚动条位置1.0.0scroll-leftnumber/string否设置横向滚动条位置1.0.0scroll-into-viewstring否值应为某子元素idid不能以数字开头。设置哪个方向可滚动则在哪个方向滚动到该元素1.0.0scroll-into-view-offsetnumber0否跳转到 scroll-into-view 目标节点时的额外偏移。skyline 自 3.1.0 版本开始支持webview 自 3.6.0 版本开始支持。3.1.0scroll-with-animationbooleanfalse否在设置滚动条位置时使用动画过渡1.0.0enable-back-to-topbooleanfalse否iOS点击顶部状态栏、安卓双击标题栏时滚动条返回顶部只支持竖向。自 2.27.3 版本开始若非显式设置为 false则在显示尺寸大于屏幕 90% 时自动开启。鸿蒙 OS 暂不支持1.0.0enable-passivebooleanfalse否开启 passive 特性能优化一定的滚动性能2.25.3refresher-enabledbooleanfalse否开启自定义下拉刷新2.10.1refresher-thresholdnumber45否设置自定义下拉刷新阈值2.10.1refresher-default-stylestringblack否设置自定义下拉刷新默认样式支持设置black | white | none none 表示不使用默认样式2.10.1refresher-backgroundstring否设置自定义下拉刷新区域背景颜色默认为透明2.10.1refresher-triggeredbooleanfalse否设置当前下拉刷新状态true 表示下拉刷新已经被触发false 表示下拉刷新未被触发2.10.1bouncesbooleantrue否iOS 下 scroll-view 边界弹性控制 (同时开启 enhanced 属性后生效)2.12.0show-scrollbarbooleantrue否滚动条显隐控制仅对垂直滚动条有效 (同时开启 enhanced 属性后生效)2.12.0fast-decelerationbooleanfalse否滑动减速速率控制, 仅在 iOS 下生效 (同时开启 enhanced 属性后生效)2.12.0binddragstarteventhandle否滑动开始事件 (同时开启 enhanced 属性后生效) detail { scrollTop, scrollLeft }2.12.0binddraggingeventhandle否滑动事件 (同时开启 enhanced 属性后生效) detail { scrollTop, scrollLeft }2.12.0binddragendeventhandle否滑动结束事件 (同时开启 enhanced 属性后生效) detail { scrollTop, scrollLeft, velocity }2.12.0bindscrolltouppereventhandle否滚动到顶部/左边时触发1.0.0bindscrolltolowereventhandle否滚动到底部/右边时触发1.0.0bindscrolleventhandle否滚动时触发event.detail { scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY }。skyline 从 3.6.6开始额外具有 boundaryVelocity 字段如果该次滚动会触碰到边界从该次滚动触发起到下一个滚动事件发生或者当次滚动事件结束为止 boundaryVelocity 将被置为触碰边界时的速度否则置为 NAN。1.0.0bindrefresherpullingeventhandle否自定义下拉刷新控件被下拉2.10.1bindrefresherrefresheventhandle否自定义下拉刷新被触发2.10.1bindrefresherrestoreeventhandle否自定义下拉刷新被复位2.10.1bindrefresheraborteventhandle否自定义下拉刷新被中止2.10.1scroll-anchoringbooleanfalse否开启 scroll anchoring 特性即控制滚动位置不随内容变化而抖动可参考 CSSoverflow-anchor属性。webview 仅在 iOS 下生效。skyline 自 3.6.2 版本开始支持默认为 true 。2.8.28.创建和注册组件9.组件的数据以及方法9.1组件的属性代码// components/custom-checkbox/custom-checkbox.js Component({ /** * 组件的属性列表 组件的对外属性主要用来接收组件使用者传递给组件内部的属性以及数据 */ properties: { // label:String label:{ type:String, value: }, position:{ type:String, value:right }, }, /** // * 组件的初始数据 用来定义当前组件内部需要使用的数据 */ data: { isChecked:false }, /** * 组件的方法列表 所有的事件处理程序需要写在methods */ methods: { // 更新复选框的状态 updateChecked(){ this.setData({ isChecked:! this.data.isChecked, label:在组件内部也可以修改properties中的数据 }) console.log(this.properties.label) } } })注意