微信小程序的基本使用1:数据绑定同步,导航方式，导航传参，全局配置，下拉刷新，上拉触底等

各组件属性参考微信官方文档：微信开放文档

视图容器

  • scroll-view

    可滚动视图区域（轮播图）。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

  • swiper

    滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。

  • swiper-item

    仅可放置在swiper组件中，宽高自动设置为100%。

  • view

    视图容器

基础容器

  • rich-text

    富文本

  • text

    文本

表单组件

  • button

    按钮

  • input

框架

全局配置

  • pages

    小程序中新增/减少页面，都需要对 pages 数组进行修改。

  • window

    用于设置小程序的状态栏、导航条、标题、窗口背景色。

  • tabBar

    如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

媒体组件

  • image

    图片。支持 JPG、PNG、SVG、WEBP、GIF 等格式，2.3.0 起支持云文件ID。

数据绑定

  • 数据绑定的基本原则

    1. 在data中定义数据
    2. 在wxml中使用数据

  • 在data中定义页面的数据

    data: {str:"字符串",num:10,bo1:false,x:null,arr:["成龙历险记","洛洛历险记","小鲤鱼历险记","猪八戒"],ran:Math.random()*10,imgs:"../../images/图片5.jpg",
}

  • mustache语法格式

    把data中的数据绑定到⻚⾯中渲染，使⽤ Mustache 语法（双⼤括号）将变量包起来即可。

    <view>{{我要绑定的数据名称}}</view>

  • mustache语法应用场景

    1. 动态绑定内容
    2. 动态绑定属性
    3. 三元运算
    <view>{{str}}</view>                       //动态绑定参数
<view>{{num+1}}</view>
<view>{{bo1}}-------{{x}}</view>
<view>{{arr}}</view>
<view>随机数：{{ran}}</view>
<view>{{ran>5?"大于5":"小于5"}}</view>      //三元运算 
<rich-text nodes="<hr>"></rich-text>
<image src="{{imgs}}"></image>             //动态绑定属性

事件绑定

  • tap

    1. 绑定方式 ： bindtap或bind:tap

    2. 事件描述 ：手指触摸后马上离开，类似HTML的点击事件

    3. 语法格式&实现案例

      //wxml
<button type="primary" bindtap="btnTapHandler">按钮</button>
//jsPage({btnTapHandler(e){console.log(e);}
})

  • input

    1. 绑定方式 ：bindinput 或 bind:input

    2. 事件描述 ：文本框的输入事件

    3. 语法格式&实现案例

      //wxml
<input type="text" bindinput="inputHandler" />
//js
inputHandler(e){console.log(e.detail.value); // e.detail.value 是变化过后，⽂本框最新的值}

  • change

    1. 绑定方式 ：bindchange 或 bind:change

    2. 事件描述 ：状态改变时触发

    3. 语法格式&实现案例

      //wxml
<input type="text" bindchange ="changeHandler" />
//js
changeHandler(e){console.log(e);
}

  • 事件对象的属性列表

  • 事件传参

事件传参与数据同步

  1. 定义数据
  2. 渲染结构
  3. 美华样式
  4. 绑定input事件处理函数
//js
Page({data: {msg:"你好"}
})
//wxml
<input type="text" value="{{msg}}" bindinput="iptHandler" />

绑定input事件处理函数

iptHandler(e){this.setData({msg:e.detail.value   // 通过 e.detail.value 获取到⽂本框最新的值})
}

条件渲染

  1. wx:if
  2. wx:elif
  3. wx:else
  4. hidden
<view wx:if="{{type ==1 }}">男</view>       //tpye = 1 男显示
<view wx:elif="{{type ==2 }}">女</view>     //tpye = 2 女显示
<view wx:else>不限</view>                    //tpye = 其他 不限显示
<view hidden="{{status}}">我没K，布鲁biu，布鲁biu，恐龙抗浪</view>
//status：true隐藏，false显示

列表渲染

  • wx:for
<view wx:for="{{array}}">索引是：{{index}} 当前项是：{{item}}
</view>

默认index 和 item

  • 手动给index和item改名
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">  // for-原名="现名"索引是：{{idx}} 当前项是：{{itemName}}
</view>

数据请求

JS中数据：

在这里插入图片描述

wxml中页面显示数据：

在这里插入图片描述

事件传参

方式一

⼩程序中的事件传参⽐较特殊，不能在绑定事件的同时为事件处理函数传递参数。例如，下⾯的代

码将不能正常⼯作，因为⼩程序会把 bindtap 的属性值，统⼀当作事件名称来处理，相当于要调⽤⼀个

名称为 btnHandler(123) 的事件处理函数

<button type="primary" bindtap="btnHandlder(123)">事件传参</button>

方式二

在WXML中可以为组件提供 data-* ⾃定义属性传参，其中 * 代表的是参数的名字，示例代码如

下：

<button bindtap="btnHandler" data-info="{{2}}">事件传参</button>
  • info 会被解析为参数的名字
  • 数值 2 会被解析为参数的值

在JS⽂件中的事件处理函数中，通过 event.target.dataset.参数名 即可获取到具体参数的值，示例

代码如下：

btnHandler(event){// dataset 是⼀个对象，包含了所有通过data-*传递过来的参数项console.log(event.target.dataset);// 通过 dataset 可以访问到具体参数的值console.log(event.target.dataset.info);}

事件传参与数据同步

实现步骤

  1. 定义数据
  2. 渲染结构
  3. 美化样式
  4. 绑定input事件处理函数

一：实现文本框和data之间的数据同步

  • JS:

    Page({data: {msg:"你好"}
})

  • 渲染结构

    <input type="text" value="{{msg}}" bindinput="iptHandler" />

  • 美化样式略

二：绑定input事件处理函数

// ⽂本框内容改变的事件
iptHandler(e){this.setData({// 通过 e.detail.value 获取到⽂本框最新的值msg:e.detail.value})
}

页面导航

声明式导航

  1. 在⻚⾯上声明⼀个 navigator导航组件
  2. 通过点击 navigator 组件实现⻚⾯跳转
导航到tabBar页面（配置为tabBar的页面）

使用navigator组件跳转到指定的tabBar页面，指定两个属性：

url：要跳转页面的地址，必须以/开头

open-type属性：switchTab

<navigator url="/pages/page1/page1" open-type="switchTab">导航到第二页（tabbar页面）</navigator>
导航到非tabBar页面

在使⽤ navigator组件跳转到普通的 ⾮tabBar ⻚⾯时，指定两个属性：

url：要跳转页面的地址，必须以/开头

open-type属性：navigate，导航到非tabBar页面时，此选项可省略不写

<navigator url="/pages/page2/page2">导航到非tabbar页面</navigator>
后退式导航

如果要后退到上⼀⻚⾯或多级⻚⾯，则需要指定 open-type 属性和 delta 属性

open-type：必须是navigateBack，表示进行后退导航

delta ：必须是数字，表示要后退的层级，返回到上一页的时候可以省略该属性，默认为1

//返回至上一页
<navigator open-type="navigateBack" delta="1">返回到上一页</navigator>
//返回上两页
<navigator open-type="navigateBack" delta="2">返回到上两页</navigator>

编程式导航

  1. 调⽤⼩程序的导航 API，实现⻚⾯的跳转
导航到tabBar页面

wx.switchTab(Object object) ⽅法，可以跳转到 tabBar⻚⾯ ：

  • url ：需要跳转的 tabBar ⻚⾯的路径，路径后不能带参数，必选
  • success ：接⼝调⽤成功的回调函数，可选
  • fail ：接⼝调⽤失败的回调函数，可选
  • complete ：接⼝调⽤结束的回调函数（调⽤成功、失败都会执⾏），可选
//wxml
<button bindtap="goTabbarPage">编程式导航到tabbar页面</button>
//js
goTabbarPage(){wx.switchTab({url: '/pages/page1/page1',})}
导航到非tabBar页面

调⽤ wx.navigateTo(Object object) ⽅法，可以跳转到 ⾮tabBar 的⻚⾯：

  • url ：需要跳转的 tabBar ⻚⾯的路径，路径后不能带参数，必选
  • success ：接⼝调⽤成功的回调函数，可选
  • fail ：接⼝调⽤失败的回调函数，可选
  • complete ：接⼝调⽤结束的回调函数（调⽤成功、失败都会执⾏），可选
//wxml
<button bindtap="goNoTabbarPage">编程式导航到非tabbar页面</button>
//js
goNoTabbarPage(){wx.navigateTo({url: '/pages/page2/page2',})},
后退式导航

调⽤ wx.navigateBack(Object object) ⽅法，可以返回上⼀⻚⾯或多级⻚⾯。

  • data：返回的⻚⾯数，如果 delta ⼤于现有⻚⾯数，则返回到⾸⻚，必选
  • success：接⼝调⽤成功的回调函数，可选
  • fail ：接⼝调⽤失败的回调函数
  • complete：接⼝调⽤结束的回调函数（调⽤成功、失败都会执⾏）
//wxml
<button bindtap="gotoBack">编程式导航返回上一页</button>
//js
gotoBack(){wx.navigateBack()
}

导航传参

声明式传参

navigator 组件的 url 属性⽤来指定将要跳转到的⻚⾯的路径

  • 参数与路径之间使⽤ ? 分隔
  • 参数键与参数值⽤ = 相连
  • 不同参数⽤ & 分隔
<navigator url="/pages/page2/page2?name=张三&age=20">声明式导航传参</navigator>

编程式导航传参

调⽤ wx.navigateTo(Object object) ⽅法跳转⻚⾯时，也可以携带参数

//wxml
<button bindtap="gotoPage1">编程式导航传参</button>
//js
gotoPage1(){wx.navigateTo({url: '/pages/page2/page2?name=李四&age=18',})}

在onload中接收导航参数

/*** 生命周期函数--监听页面加载*/onLoad: function (options) {console.log(options);}

全局配置

⼩程序根⽬录下的 app.json ⽂件是⼩程序的全局配置⽂件。常⽤的配置项如下:

  • pages ：记录当前⼩程序所有⻚⾯的存放路径
  • window ：全局设置⼩程序窗⼝的外观
  • tabBar ：设置⼩程序底部的 tabBar 效果
  • style ：是否启⽤新版的组件样式

window节点常⽤的配置项如下表

属性名类型默认值说明
navigationBarTitleTextString字符串导航栏标题⽂字内容
navigationBarBackgroundColorHexColor#000000导航栏背景颜⾊
navigationBarTextStyleStringwhite导航栏标题颜⾊仅⽀持 black / white
backgroundColorHexColor#000000窗⼝的背景⾊
backgroundTextStyleStringdarkdark
enablePullDownRefreshBooleanfalse是否全局开启下拉刷新
onReachBottomDistanceNumber50⻚⾯上拉触底事件触发时距⻚⾯底部距离，单

tabbar节点常⽤的配置项如下表

属性类型默认值描述
positionString可选，bottomtabBar 的位置，仅⽀持 bottom/top
borderStyleString可选，blacktabBar 上边框的颜⾊，仅⽀持 black/white
colorHexColortab 上⽂字的默认（未选中）颜⾊
selectedColorHexColortab 上的⽂字选中时的颜⾊
backgroundColorHexColortabBar 的背景⾊
listArray必选tab ⻚签的列表，最少 2 个、最多 5 个 tab

每个tabber项的配置选项

属性类型必填描述
pagePathString是⻚⾯路径，⻚⾯必须在 pages 中预先定义
textString是tab 上显示的⽂字
iconPathString否未选中时的图标路径；当 postion 为 top 时，不显示icon
selectedIconPathString否选中时的图标路径；当 postion 为 top 时，不显示 icon

下拉刷新

下拉刷新是移动端的专有名词，指的是通过⼿指在屏幕上的下拉滑动操作，从⽽重新加载⻚⾯数据

的⾏为

  1. 启⽤下拉刷新有两种⽅式

    • 全局开启下拉刷新

      在 app.json 的 window 节点中，将 enablePullDownRefresh 设置为 true

    • 局部开启下拉刷新

      在⻚⾯的 .json 配置⽂件中，将 enablePullDownRefresh 设置为 true

  2. 配置下拉刷新窗⼝的样式

    在全局或⻚⾯的 .json 配置⽂件中，通过 backgroundColor 和 backgroundTextStyle 来配置下拉

    刷新窗⼝的样式，其中

    • backgroundColor ⽤来配置下拉刷新窗⼝的背景颜⾊，仅⽀持16 进制的颜⾊值
    • backgroundTextStyle ⽤来配置下拉刷新 loading 的样式，仅⽀持 dark 和 light

  3. 监听⻚⾯的下拉刷新事件

    在⻚⾯的 .js ⽂件中，通过 onPullDownRefresh() 函数即可监听当前⻚⾯的下拉刷新事件。

    例如，在⻚⾯的 wxml 中有如下的 UI 结构，点击按钮可以让 count 值⾃增 +1

    wxml界面：

    <view>count值为：{{count}}</view>
<button bindtap="countAdd">+1</button>

    JS文件

    // +1 按钮的点击事件处理函数
countAdd(){this.setData({count:this.data.count + 1})
}

    在触发⻚⾯的下拉刷新事件的时候，如果要把 count 的值重置为 0，示例代码如下

    /* ⻚⾯相关事件处理函数--监听⽤户下拉动作 */onPullDownRefresh:function() {this.setData({count:0})}

  4. 停⽌下拉刷新的效果

    当处理完下拉刷新后，下拉刷新的 loading 效果会⼀直显示，不会主动消失，所以需要⼿动隐藏下

    拉刷新的 loading 效果。此时，调⽤ wx.stopPullDownRefresh() 可以停⽌当前⻚⾯的下拉刷新。示例代码如下

    /* ⻚⾯相关事件处理函数--监听⽤户下拉动作 */onPullDownRefresh:function() {this.setData({count:0})// 当数据重置成功之后，调⽤此函数，关闭下拉刷新的效果wx.stopPullDownRefresh()}

上拉触底

上拉触底是移动端的专有名词，通过⼿指在屏幕上的上拉滑动操作，从⽽加载更多数据的⾏为

  1. 监听⻚⾯的上拉触底事件

    在⻚⾯的 .js ⽂件中，通过 onReachBottom() 函数即可监听当前⻚⾯的上拉触底事件。示例代码如

    下：

     /* ⻚⾯的上拉触底事件的处理函数 */onReachBottom:function() {console.log("触发了上拉触底的事件");}

  2. 配置上拉触底距离

    • 上拉触底距离指的是触发上拉触底事件时，滚动条距离⻚⾯底部的距离
    • 可以在全局或⻚⾯的 .json 配置⽂件中，通过 onReachBottomDistance 属性来配置上拉触底的距离
    • ⼩程序默认的触底距离是 50px，在实际开发中，可以根据⾃⼰的需求修改这个默认值

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/337673.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

链上数据分析：解读加密生态的秘密武器

链上数据分析：解读加密生态的秘密武器

作者&#xff1a;shellyfootprint.network 数据源&#xff1a; Wallet Profile 在加密货币的世界里&#xff0c;信息是力量。但如何获取真实、有价值的数据呢&#xff1f;普通个人投资者浏览 Reddit 帖子或观看 YouTube 视频&#xff0c;并根据基本价格图表做出投资决定。这种…
阅读更多...
AirSim 的 ROS 功能包测试

AirSim 的 ROS 功能包测试

参考链接&#xff1a; Ubuntu18.04搭建AirSimROS仿真环境_airsim ros-CSDN博客 ROS: AirSim ROS Wrapper - AirSim 1.编译 ros 包&#xff08;必须是 gcc-8&#xff09; 如果您的默认 GCC 不是 8 或更高&#xff08;使用 gcc --version 检查&#xff09;&#xff0c;那么编译…
阅读更多...
离散数学-二元关系

离散数学-二元关系

4.1关系的概念 1)序偶及n元有序组 由两个个体x和y&#xff0c;按照一定顺序排序成的、有序数组称为有序偶或有序对、二元有序组&#xff0c; 记作<x&#xff0c;y>&#xff0c;其中x是第一分量&#xff0c;y是第二分量。 相等有序偶&#xff1a;第一分量和第二分量分…
阅读更多...
Python-面向对象

Python-面向对象

面向对象 1.初识对象1.1理解使用对象完成数据组织的思路 2.成员方法2.1类的定义和使用语法2.2成员方法的使用 3.类和对象4.构造方法4.1使用构造方法向成员变量赋值 5.其他内置方法5.1__str__字符串方法5.2__lt__小于符号比较方法5.3__le__小于等于比较符号5.4__eq__比较运算符实…
阅读更多...
蓝凌EIS智慧协同平台 UniformEntry.aspx sql注入漏洞

蓝凌EIS智慧协同平台 UniformEntry.aspx sql注入漏洞

漏洞描述&#xff1a; 蓝凌EIS智慧协同平台是一个简单、高效的工作方式专为成长型企业打造的沟通、协同、社交的移动办公平台&#xff0c;覆盖OA、沟通、客户、人事、知识等管理需求&#xff0c;集合了非常丰富的模块&#xff0c;满足组织企业在知识、项目管理系统建设等需求的…
阅读更多...
找出字符串中第一个匹配项的下标(Leetcode28)

找出字符串中第一个匹配项的下标(Leetcode28)

例题&#xff1a; 分析&#xff1a; 题目的意思就是&#xff1a; 先给出一个字符串pattern&#xff0c;要拿着pattern字符串和原始字符串&#xff08;origin&#xff09;比对&#xff0c;若在origin中找到了pattern字符串&#xff0c;则返回pattern字符串在原始字符串origin中的…
阅读更多...
机器学习笔记：时间序列异常检测

机器学习笔记：时间序列异常检测

1 异常类型 1.1 异常值outlier 给定输入时间序列&#xff0c;异常值是时间戳值其中观测值与该时间序列的期望值不同。 1.2 波动点&#xff08;Change Point&#xff09; 给定输入时间序列&#xff0c;波动点是指在某个时间t&#xff0c;其状态在这个时间序列上表现出与t前后…
阅读更多...
buuctf[极客大挑战 2019]BabySQL--联合注入、双写过滤

buuctf[极客大挑战 2019]BabySQL--联合注入、双写过滤

目录 1、测试万能密码&#xff1a; 2、判断字段个数 3、尝试联合注入 4、尝试双写过滤 5、继续尝试列数 6、查询数据库和版本信息 7、查询表名 8、没有找到和ctf相关的内容&#xff0c;查找其他的数据库 9、查看ctf数据库中的表 10、查询Flag表中的字段名 11、查询表…
阅读更多...
RocketMq直接上手（火箭班）

RocketMq直接上手（火箭班）

Apache RocketMQ官方文档&#xff1a;https://rocketmq.apache.org/zh/docs/bestPractice/06FAQ/&#xff0c;这里面涵盖了所有的基本知识、各种搭建环境、基础代码测试…还有各种问题总结&#xff0c;很值得自主学习。 1.配置依赖&#xff1a;pom.xml文件 可以只截取maven仓库…
阅读更多...
如何轻松拿捏LIO-SAM？

如何轻松拿捏LIO-SAM？

LOAM是目前为止激光里程计(LO)领域最经典最广泛使用的方法&#xff0c;堪称LO领域的baseline&#xff0c;至今仍在KITTI数据集上名列前茅。但是它存在诸多问题&#xff0c;比如&#xff1a;它直接存储全局体素地图而不是局部地图&#xff0c;从而很难执行回环检测以修正漂移&am…
阅读更多...
Python(33):数据断言(查询数据库数据和插入数据对比)

Python(33):数据断言(查询数据库数据和插入数据对比)

Python(33):数据断言(查询数据库数据和插入数据对比) 前言&#xff1a; 需求&#xff1a;需要针对查询数据库数据和插入的数据进行对比&#xff0c;用Python语言进行编写 数据库查询的结果可参考&#xff1a;https://blog.csdn.net/fen_fen/article/details/135462484 1、查…
阅读更多...
解决 ubuntu 下编译文件的时候与 YAML 相关的的报错

解决 ubuntu 下编译文件的时候与 YAML 相关的的报错

输入&#xff1a; catkin build -DCMAKE_C_COMPILERgcc-8 -DCMAKE_CXX_COMPILERg-8 或 catkin build airsim_tutorial_pkgs -DCMAKE_C_COMPILERgcc-8 -DCMAKE_CXX_COMPILERg-8 报错如下&#xff1a; 可能是缺少 yaml-cpp 文件&#xff0c;然后操作&#xff1a; sudo apt-g…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023