(5)下拉刷新页面的实现原理
(1)首先要开启该页面的下拉刷新的功能
(2)然后在该页面添加的OnPullDownRefresh(e){ } 里面监听下拉刷新，并在里面调用获取页面数据的代码，然后就要在里面使用vue的**this.$forceUpdate()**方法来重新渲染页面。
示例代码如下：
onPullDownRefresh(e) { this.getBannerImage() this.getServiceInfo() this.getNewsList() this.$forceUpdate() uni.stopPullDownRefresh() }
最后别忘了调用uni.stopPullDownRefresh()停止刷新。
三.常用的uniapp组件
1.轮播图 swiper
注意滑动切换和滚动的区别，滑动切换是一屏一屏的切换。swiper下的每个swiper-item是一个滑动切换区域，不能停留在2个滑动区域之间。
常用属性说明：
2.可滚动视图区域 scroll-view
属性说明
| 属性 | 说明 |
| scroll-x | 允许横向滚动。默认为false |
| scroll-with-animation | 在设置滚动条位置时使用动画过渡 |
scroll-view里面放view。并且一定要给scroll-view的样式加上white-space: nowrap
下面是使用示例：
<view class="scroll-box"> <scroll-view scroll-x="true" scroll-with-animation="true"> <view class="scroll-view-item" v-for="item in newsfl"> <text>{{item.name}}</text> </view> </scroll-view> </view>
如果要点击各view换颜色，就给view添加一个hover-class的属性。
3.富文本 rich-text
富文本的用处非常的大，请求过来的数据很多带html标签，使用富文本可以对这些标签解析渲染。
常用属性：
| 属性 | 说明 |
| nodes | 要加载的文本（html string） |
四.常用的uni-ui组件
1. **uni-data-checkbox ** 选项组件
本组件是基于uni-app基础组件checkbox的封装，这个组件可以用于单选项和多选项。
下面是基本的使用：
(1)单选按钮
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pSLuNTO3-1647782363222)(D:\Pictures\截图\Snipaste_2022-03-12_10-01-20.png)]
<template> <view> <uni-data-checkbox v-model="value" :localdata="range" @change="change"></uni-data-checkbox> </view> </template>
export default { data() { return { value: 0, range: [{"value": 0,"text": "篮球" },{"value": 1,"text": "足球"},{"value": 2,"text": "游泳"}] } }, methods: { change(e){ console.log(e); } } }
v-model 为表单的双向数据绑定，绑定value的值。
localdata 为要渲染的数据，属性的格式为数组，数组内每项是对象，对象的格式需为{ “value” : 选中后的值 ，“text” : 显示的文本 }
@change 选中状态改变时触发事件
2. uni-dateformat 日期格式化组件。
基本用法如下：
<uni-dateformat date="2020/10/20 20:20:20" format="yyyy年MM月dd日" ></uni-dateformat>
date 传入要格式化的时间。format指定格式化的模式（如yyyy-MM-dd hh:mm:ss）
3. uni-easyinput 增强输入框
最基础的用法：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8gqGbNTr-1647782363222)(D:\Pictures\截图\Snipaste_2022-03-12_11-16-06.png)]
<uni-easyinput v-model="value" placeholder="请输入内容"></uni-easyinput>
可以设置输入框的类型
type属性，值有：password密码框，textarea多行文本输入框，text单行文本框，number数字输入键盘
可以设置输入框的最大长度 ：maxlength
设置键盘右下角的文字 confirmType
conformType有这些属性：
是否自动去除空格 trim
样式自定义 style
type=password 时，是否显示小眼睛图标 passwordIcon 默认为true
4. uni-file-picker 文件上传组件
文件选择上传组件，可以选择图片、视频等任意文件并上传到当前绑定的服务空间。项目里会有一个更换头像的功能。由于比赛的项目并没有提供上传头像的接口，所以只是本地app更换头像，用来示意一下。
<uni-file-picker v-model="value" file-mediatype="image" limit="1" @select="select()"> <button>选择头像</button> </uni-file-picker>
v-model绑定一个空数组 就行， file-mediatype指定文件类型 ，limit用于指定上传文件的个数。有一个选中时触发的方法@select
5. uni-group 分组组件
<uni-group title="分组1" top="20" mode="card"> <view>分组1 的内容</view> <view>分组1 的内容</view> </uni-group> <uni-group title="分组2"> <view>分组2 的内容</view> <view>分组2 的内容</view> </uni-group>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sdmOMe62-1647782363223)(D:\Pictures\截图\Snipaste_2022-03-12_13-05-51.png)]
title用于指定分组的标题，top用于指定分组的间隔，mode为模式，有默认和card模式。
6 . uni-combox
<uni-combox label="所在城市" :candidates="candidates" placeholder="请选择所在城市" v-model="city"></uni-combox>
