scroll-view
可滾動(dòng)視圖區(qū)域。用于區(qū)域滾動(dòng)
<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>
屬性說明（查看更多屬性請查看官網(wǎng) [swiper | uni-app官網(wǎng) (dcloud.net.cn)](https://uniapp.dcloud.net.cn/component/swiper.html)）
| 屬性名 | 類型 | 默認(rèn)值 | 說明 |
|---|---|---|---|
| scroll-y | Boolean | false | 允許縱向滾動(dòng) |
| scroll-top | Number/String | 設(shè)置豎向滾動(dòng)條位置 | |
| @scroll | EventHandle | 滾動(dòng)時(shí)觸發(fā)，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;
}
點(diǎn)擊效果是點(diǎn)擊按鈕返回到第一個(gè)滑塊的位置
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;
}
}
屬性說明（查看更多屬性請查看官網(wǎng) [swiper | uni-app官網(wǎng) (dcloud.net.cn)](https://uniapp.dcloud.net.cn/component/swiper.html)）
| 屬性名 | 類型 | 默認(rèn)值 | 說明 |
|---|---|---|---|
| indicator-dots | Boolean | false | 是否顯示面板指示點(diǎn) |
| autoplay | Boolean | false | 是否自動(dòng)切換 |
| interval | Number | 5000 | 自動(dòng)切換時(shí)間間隔 |
| duration | Number | 500 | 滑動(dòng)動(dòng)畫時(shí)長 |
| circular | Boolean | false | 是否采用銜接滑動(dòng)，即播放到末尾后重新回到開頭 |
| current | Number | 0 | 當(dāng)前所在滑塊的 index |
效果展示
彈窗
彈窗所綁定的事件
<button @click="showLoad">彈窗</button>
提示框
script部分
showLoad（）{
uni.showLoading({
title:"加載中...",
mask: true
})
setTimeout(function(){
uni.hideLoading()
},3000)
}
點(diǎn)擊按鈕后的效果圖（因?yàn)樵O(shè)置時(shí)間是三秒，不設(shè)置就不會(huì)關(guān)閉，mask是表示提示框出現(xiàn)后頁面的其他內(nèi)容不可觸摸）
提示彈窗（與加載中彈窗類似）
script部分
showLoad（）{
uni.showToast({
title:"成功操作",
icon:"success",
duration:2000
})
}
點(diǎn)擊按鈕后的效果圖（duration：設(shè)置顯示時(shí)長為2秒，title：設(shè)置提示文字，icon：設(shè)置顯示圖標(biāo)）
確認(rèn)取消彈窗
script部分
showLoad（）{
uni.showModal({
title:"提示",
content:"確認(rèn)刪除該選項(xiàng)",
success:function(res){
if(res.confirm){
console.log("確認(rèn)");
}else{
console.log("取消");
}
}
})
}
點(diǎn)擊按鈕后的效果圖（res.confirm == true 點(diǎn)擊確認(rèn)按鈕執(zhí)行操作）
確認(rèn)取消彈窗的自定義設(shè)置
script部分
showLoad（）{
uni.showModal({
title:"提示",
content:"確認(rèn)刪除該選項(xiàng)",
confirmText:"刪除", //確認(rèn)按鈕
cancelText:"取消", // 取消按鈕
confirmColor: "#4cd964",
cancelColor: "#dd524d",
success:function(res){
if(res.confirm){
console.log("確認(rèn)");
}else{
console.log("取消");
}
}
})
}
成品效果圖
列表提示框
script部分
showLoad（）{
uni.showActionSheet({
itemList: ['選項(xiàng)一', '選項(xiàng)二', '選項(xiàng)三', '選項(xiàng)四'],
itemColor: "#007aff",
success: function(res) {
console.log(res.tapIndex);
},
fail() {
console.log("取消");
}
})
}
成品效果圖（itemList：列表數(shù)組，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”：設(shè)置按鈕大小）
選擇器picker
從底部彈起的滾動(dòng)選擇器
單列選擇器
<picker :range="array" @change="bindPickChange" range-key="name" :value="index">
<view style="padding: 20rpx;background-color:white;">
{{array[index].name}}
</view>
</picker>
屬性說明（查看更多屬性請查看官網(wǎng) [swiper | uni-app官網(wǎng) (dcloud.net.cn)](https://uniapp.dcloud.net.cn/component/swiper.html)）
| 屬性名 | 類型 | 默認(rèn)值 | 說明 |
|---|---|---|---|
| range | Array / Array | [] | mode為 selector 或 multiSelector 時(shí)，range 有效 |
| range-key | String | 當(dāng) range 是一個(gè) Array＜Object＞ 時(shí)，通過 range-key 來指定 Object 中 key 的值作為選擇器顯示內(nèi)容 |
|
| value | Number | 0 | value 的值表示選擇了 range 中的第幾個(gè)（下標(biāo)從 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()
},
}
效果展示
時(shí)間選擇器
<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部分文章來源：http://www.zghlxwxcb.cn/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}`
}
文章來源地址http://www.zghlxwxcb.cn/news/detail-794958.html
到了這里，關(guān)于uni-app的組件（一）的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
