微信开发--微信小程序(二)
1. 微信小程序下拉刷新
相信大家都使用过微信小程序,那一定都知道微信小程序下拉刷新吧,其实下拉刷新是微信小程序自带的功能,只不过没有背景图看不出来而已,好坑诶.
如果想要显示出来下拉刷新的三个小点,只需要在app.json文件中配置就好啦:
"window": {
//三个小点的颜色,只有两种颜色哈
"backgroundTextStyle": "dark",
//下拉刷新的背景颜色
"backgroundColor": "#F2F2F2",
},2. 微信小程序上拉数据加载,请求新数据
以昨天的电影列表为例,一次请求20条数据,这就需要监听页面加载,将网络请求单独封装,用户上拉,数据置为空,,list.js文件是这样的:
Page({
/**
* 页面的初始数据
*/
data: {
//电影列表数据
movies:[],
//每次请求数据个数
count:20
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.getData(0,this.data.count);
},
//网络请求函数
getData(start,count){
wx.request({
url: 'https://douban.uieee.com/v2/movie/top250',
data: {
start,
count
},
header: {
"content-type": "json"
},
method: 'GET',
dataType: 'json',
responseType: 'text',
success: res => {
// console.log(res);
this.setData({
movies: [...this.data.movies, ...res.data.subjects]
})
},
fail: function (res) { },
complete: function (res) { },
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
this.setData({
movies:[]
});
this.getData(0,this.data.count);
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
this.getData(this.data.movies.length,20);
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})3. 补充一个小知识吧
以电影列表为例,数据在循环时,演员的名字中间用 '/' 隔开,可是如果直接循环 '/' ,最后一个演员后面也会有 '/' ,可我们要实现的效果是这样:
那要怎么办呢? 很简单:
<text wx:for="{{detailsArr.casts}}" wx:key="{{index}}">{{item.name}}{{index != detailsArr.casts.length-1 ? ' / ':''}}</text>4. php定界符
这个是微信公众号里用到的,突然想起来了,来总结一下它的基本用法.
定界符<<<，当需要输出大段文本时，一般选用定界符，它的输出形式和使用双引号输出的表现一致，只是没有双引号，这意味着在定界符中的字符串不需要转义双引号。
定界符的特点:
- 按照原样输出，包括换行符、特殊字符等
- 任何特殊字符都不需要转义，比如双引号、单引号，它会按照原样输出
- 像在双引号字符串中一样使用php的变量输出
<?php
$testFloat = 0.58;
// 我在这里使用html作为定界符标识（定界符标识是可以自定义的）
echo <<<html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>$testFloat
</head>
<body>
</body>
</html>
html;
echo "<!DOCTYPE html>
<html lang=\"en\">
<head>
<meta charset=\"UTF-8\">
<title>Document</title>$testFloat
</head>
<body>
</body>
</html>";
?>以上两个echo的最终输出结果是一样的。 因此，像类似html大段文本的输出，就可以使用定界符方式，html元素属性就不用对双引号进行转义了。
使用定界符<<< 的注意事项(缺一不可)
- 定界符标识必须前后一致
- 可以任意定义定界符标识，比如 echo html div ，尽量选用有意义的标识符，并遵循某类命名规范。
- 开头标识后不能跟任何字符，空格也不可以，换行后再跟要输出的文本。
- 结束标识（其后紧跟一个分号;）前后都不可有任何字符，即结束标识要顶头写，且独占一行，其后除紧跟分号外，不能有任何字符（空格也不可以）
- 最后要注意的是，结束标识所在行不能成为脚本的最后一行，其下必须有空行或者其他代码行，否则报错。
<?php
echo <<< div// 标识符后不能有空格，注释以及其他任何字符；标识符前无限制
<div id="divid"></div>
div;// 结束标识必须独占一行且前后都不可有任何字符，包括空格，没否则报错
// 如果结束标识下方没有任何行（空行、代码行等），报错
?>本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2019-05-25，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
相关产品与服务
云开发 CloudBase
云开发（Tencent CloudBase，TCB）是腾讯云提供的云原生一体化开发环境和工具平台，为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务，可用于云端一体化开发多种端应用（小程序、公众号、Web 应用等），避免了应用开发过程中繁琐的服务器搭建及运维，开发者可以专注于业务逻辑的实现，开发门槛更低，效率更高。
腾讯云开发者
