scroll-view

可滚动视图区域。用于区域滚动

	<scroll-view scroll-y="true" :scroll-top="scrollTop" class="scroll-y" @scroll="scroll"><view id="demo1" class="scroll-view-item bg-red">A</view><view id="demo2" class="scroll-view-item bg-green">B</view><view id="demo3" class="scroll-view-item bg-blue">C</view></scroll-view>

属性说明（查看更多属性请查看官网 [swiper | uni-app官网 (dcloud.net.cn)](https://uniapp.dcloud.net.cn/component/swiper.html)）

属性名	类型	默认值	说明
scroll-y	Boolean	false	允许纵向滚动
scroll-top	Number/String		设置竖向滚动条位置
@scroll	EventHandle		滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

效果展示

一键回到顶部

		<button @click="goTop">回到顶部</button><scroll-view scroll-y="true" :scroll-top="scrollTop" class="scroll-y" @scroll="scroll"><view id="demo1" class="scroll-view-item bg-red">A</view><view id="demo2" class="scroll-view-item bg-green">B</view><view id="demo3" class="scroll-view-item bg-blue">C</view></scroll-view>

script 部分代码

			scroll: function(e) {console.log(e.detail.scrollTop);//方案一：this.old.scrollTop = e.detail.scrollTop//方案二：// this.scrollTop = e.detail.scrollTop},goTop() {//方案一：this.scrollTop = this.old.scrollTop;this.$nextTick(function() {this.scrollTop = 0;})//方案二：// this.scrollTop = 0;}

点击效果是点击按钮返回到第一个滑块的位置

swiper

轮播图的滑块视图容器

轮播图代码

		<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circularinterval="5000" current="1"><swiper-item><view class="swiper-item bg-red">A</view></swiper-item><swiper-item><view class="swiper-item bg-green">B</view></swiper-item><swiper-item><view class="swiper-item bg-blue">C</view></swiper-item></swiper>

轮播图样式

	.swiper {// height: 200upx;.swiper-item {height: 250upx;line-height: 250upx;text-align: center;color: black;}.bg-red {background-color: red;}.bg-green {background-color: green;}.bg-blue {background-color: blue;}}

属性说明（查看更多属性请查看官网 [swiper | uni-app官网 (dcloud.net.cn)](https://uniapp.dcloud.net.cn/component/swiper.html)）

属性名	类型	默认值	说明
indicator-dots	Boolean	false	是否显示面板指示点
autoplay	Boolean	false	是否自动切换
interval	Number	5000	自动切换时间间隔
duration	Number	500	滑动动画时长
circular	Boolean	false	是否采用衔接滑动，即播放到末尾后重新回到开头
current	Number	0	当前所在滑块的 index

效果展示

弹窗

弹窗所绑定的事件

<button @click="showLoad">弹窗</button>

提示框

script部分

showLoad（）{uni.showLoading({title:"加载中...",mask: true})setTimeout(function(){uni.hideLoading()},3000)
}

点击按钮后的效果图（因为设置时间是三秒，不设置就不会关闭，mask是表示提示框出现后页面的其他内容不可触摸）

提示弹窗（与加载中弹窗类似）

script部分

showLoad（）{uni.showToast({title:"成功操作",icon:"success",duration:2000})
}

点击按钮后的效果图（duration：设置显示时长为2秒，title：设置提示文字，icon：设置显示图标）

确认取消弹窗

script部分

showLoad（）{uni.showModal({title:"提示",content:"确认删除该选项",success:function(res){if(res.confirm){console.log("确认");}else{console.log("取消");}}})
}

点击按钮后的效果图（res.confirm == true 点击确认按钮执行操作）

确认取消弹窗的自定义设置

script部分

showLoad（）{uni.showModal({title:"提示",content:"确认删除该选项",confirmText:"删除", //确认按钮cancelText:"取消", // 取消按钮confirmColor: "#4cd964",cancelColor: "#dd524d",success:function(res){if(res.confirm){console.log("确认");}else{console.log("取消");}}})
}

成品效果图

列表提示框

script部分

showLoad（）{uni.showActionSheet({itemList: ['选项一', '选项二', '选项三', '选项四'],itemColor: "#007aff",success: function(res) {console.log(res.tapIndex);},fail() {console.log("取消");}})
}

成品效果图（itemList：列表数组，itemColor：列表字体颜色）

按钮

		<button size="mini" type="primary">我是按钮</button><button size="mini" type="primary">我是按钮</button><button type="primary">我是按钮</button><button type="primary" disabled="true">我是按钮</button><button loading type="warn">我是按钮</button>

效果图（size=“mini”：设置按钮大小）

选择器picker

从底部弹起的滚动选择器

单列选择器

		<picker :range="array" @change="bindPickChange" range-key="name" :value="index"><view style="padding: 20rpx;background-color:white;">{{array[index].name}}</view></picker>

属性说明（查看更多属性请查看官网 [swiper | uni-app官网 (dcloud.net.cn)](https://uniapp.dcloud.net.cn/component/swiper.html)）

属性名	类型	默认值	说明
range	Array / Array	[]	mode为 selector 或 multiSelector 时，range 有效
range-key	String		当 range 是一个 Array＜Object＞ 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
value	Number	0	value 的值表示选择了 range 中的第几个（下标从 0 开始）

script部分

data(){return{index: 0,array: [{name: "中国"},{name: "美国"},{name: "俄罗斯"},{name: "德国"}],}
},
methods: {bindPickChange: function(e) {this.index = e.detail.value},
}

效果图

多列选择器

		<picker @change="bindPickChange" mode="multiSelector" @columnchange="bindMultiPickerColumnChange":value="multindex" :range="multArray"><view style="background-color: white;">{{multArray[0][multindex[0]]}},{{multArray[1][multindex[1]]}},{{multArray[2][multindex[2]]}}</view></picker>

script部分

data(){return{multArray: [['亚洲', '欧洲'],['中国', '德国'],['北京', '柏林']],multindex: [0, 0, 1],}
},
methods: {bindMultiPickerColumnChange: function(e) {this.multindex[e.detail.column] = e.detail.value;//刷新this.$forceUpdate()},
}

效果展示

时间选择器

		<picker mode="time" :value="time" :start="minTime" :end="maxTime" @change="bindTimeChange"><view style="background-color: white;">{{time}}</view></picker>

script部分

data(){return{time: '12:01'}
},
methods: {bindTimeChange: function(e) {this.time = e.detail.value},
}

效果展示

日期选择器

		<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange"><view style="background-color: white;">{{date}}</view></picker>

script部分

export default{data(){return{date: getDate({format: true}),startDate: getDate('start'),endDate: getDate('end'),}},methods:{bindDateChange: function(e){this.date = e.detail.value},}
}
function getDate(type) {const date = new Date();let year = date.getFullYear();let month = date.getMonth()+1;let day = date.getDate();if(type == 'start'){year = year - 10;}else if(type == 'end'){year = year + 10}month = month > 9 ? month : '0' + month;day = day > 9 ? day : '0' + day ;return `${year}-${month}-${day}`
}