uni-app的组件（一）

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" circular
			interval="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}`
}