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部分文章来源：https://www.toymoban.com/news/detail-794958.html
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}`
}
文章来源地址https://www.toymoban.com/news/detail-794958.html
到了这里，关于uni-app的组件（一）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
