小程序项目实战-第四篇
本篇目录：
给页面添加下拉刷新功能 添加加载提示 使文字太多时省略 点击图片大图显示
给页面添加下拉刷新功能
开启下拉刷新
① 找到该页的json文件添加开启页面刷新：
"enablePullDownRefresh": true, #开启页面刷新
"backgroundTextStyle": "dark" #刷新背景样式② js文件中监控下拉刷新事件：
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
当用户下拉刷新时要执行代码块
},添加加载提示
官方文档：
https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showLoading.html
设置加载图标：
wx.showLoading({
title: '加载中',
})设置多久后关闭加载图标:
setTimeout(function () {
wx.hideLoading()
}, 2000)也可以在异步请求的回调函数中直接执行：
wx.hideLoading()使文字太多时省略
此为css样式，可指定文字在第几行时出现...省略
/*使文字太多的时候第二行出现...的省略*/
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;点击图片大图显示
小程序中默认是没有点击图片大图显示的，需要自己对后端进行配置。
我们也不需要自己写一个该样式，可以调用小程序的api previewImage
小图状态
大图状态
具体步骤：
① 给要大图显示的图片设置一个点击事件
② 在JS页中触发函数：
wx.previewImage({
// 当前显示图片的http链接
current: this.data.img_src[0],
// 需要预览的图片http链接列表 是一个数组
urls: this.data.img_src
})本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2021-02-12，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
相关产品与服务
云开发 CloudBase
云开发（Tencent CloudBase，TCB）是腾讯云提供的云原生一体化开发环境和工具平台，为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务，可用于云端一体化开发多种端应用（小程序、公众号、Web 应用等），避免了应用开发过程中繁琐的服务器搭建及运维，开发者可以专注于业务逻辑的实现，开发门槛更低，效率更高。
腾讯云开发者
