uni-app組件

scroll-view

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

回到頂部

getScrollTop(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 indicator-color="pink" indicator-active-color="red" autoplay current="1"
			interval="3000" duration="1000" circular>
			<swiper-item class="swiper-item bg-blue">A</swiper-item>
			<swiper-item class="swiper-item bg-yellow">B</swiper-item>
			<swiper-item class="swiper-item bg-green">C</swiper-item>
		</swiper>

text 文本

space的參數(shù)值

<text selectable decode space="nbsp">{{msg}}</text>

button 按鈕

<button plain disabled type="primary">我是按鈕</button>
<button loading type="default">我是按鈕</button>
<button type="warn">我是按鈕</button>
<button size="mini" type="primary">我是按鈕</button>
<button size="mini" type="primary">我是按鈕</button>

input 輸入框

type的有效值

<!-- 數(shù)據(jù)綁定 -->
<!-- <input type="text" :value="msg" /> -->
<input type="text" v-model="msg" />

<!-- 密碼框 -->
<input type="text" password placeholder="請輸入密碼" />
<input type="text" placeholder="請輸入密碼" />

radio 單選

單項選擇器，內(nèi)部由多個 <radio> 組成。通過把多個radio包裹在一個radio-group下，實現(xiàn)這些radio的單選。

<radio-group @change="onSelect">
    <radio checked value="1"></radio> 吃
    <radio color="red" value="2"></radio> 喝
    <radio disabled value="3"></radio> 嫖
    <radio value="4"></radio> 賭
</radio-group>

checkbox 多選

checkbox-group多項選擇器，內(nèi)部由多個 checkbox 組成。

<checkbox-group>
    <checkbox checked color="red" value="1">籃球</checkbox>
    <checkbox disabled value="2">足球</checkbox>
    <checkbox color="rgba(120,0,255,0.5)" value="3">網(wǎng)球</checkbox>
</checkbox-group>

picker 選擇器

從底部彈起的滾動選擇器。支持五種選擇器，通過mode來區(qū)分，分別是普通選擇器selector，多列選擇器multiSelector，時間選擇器time，日期選擇器date，省市區(qū)選擇器region，默認(rèn)是普通選擇器。

1.普通選擇器selector

html

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

js

//數(shù)據(jù)	
index: 0,
    array: [{
        name: "中國"
    }, {
        name: "美國"
    }, {
        name: "俄羅斯"
    }]
//函數(shù)
bindPickChange(e) {
    this.index = e.detail.value
    // 刷新
    this.$forceUpdate()
},

2.多列選擇器multiSelector

html

<!-- 多列 -->
<picker @change="bindPickChange" mode="multiSelector" @columnchange="bindColumnChange" :value="multIndex"
        :range="multArray">
    <view style="padding: 20rpx; color: blue;">
        {{multArray[0][multIndex[0]]}} -
        {{multArray[1][multIndex[1]]}} -
        {{multArray[2][multIndex[2]]}}
    </view>
</picker>

js

multArray: [
    ['亞洲', '歐洲', '美洲'],
    ['中國', '韓國', '日本'],
    ['北京', '上海', '西安']
],
multIndex: [0, 0, 0],
//多列
bindColumnChange(e) {
    this.multIndex[e.detail.column] = e.detail.value
},    
bindPickChange(e) {
    this.index = e.detail.value

    // 刷新
    this.$forceUpdate()
},

3.時間選擇器time

html

<!-- 時間 -->
<picker mode="time" :range="time" @change="bindTimeChange" :start="minTime" :end="maxTime">
    <view style="padding: 20rpx; color: yellowgreen;">
        {{time}}
    </view>
</picker>

js

//時間
time: "11:16",
minTime: "00:00",
maxTime: "23:59",

//時間
bindTimeChange(e) {
    this.time = e.detail.value
},

4.日期選擇器date

html

<!-- 日期 -->
<picker mode="date" :range="date" @change="bindDateChange" :start="startDate" :end="endDate">
    <view style="padding: 20rpx; color: yellowgreen;">
        {{date}}
    </view>
</picker>

js

//日期
date: getDate({
    format: true
}),
startDate: getDate('start'),
endDate: getDate('end')

//日期
bindDateChange(e) {
    this.date = e.detail.value
},

5.省市區(qū)選擇器region

slider 滑塊

html

<slider min="0" max="100" step="1" :value="sliderNum" activeColor="yellow" backgroundColor="red" @changing="setSlider"></slider>

js

setSlider(e) {
    this.sliderNum = e.detail.value
},

textarea 文本域

<textarea maxlength="10" placeholder="請輸入內(nèi)容" auto-height></textarea>

彈窗

提示框 uni.showLoading

uni.showLoading一般不自動關(guān)閉，需要調(diào)用uni.hideLoading()關(guān)閉

//提示框
uni.showLoading({
    title:"加載中...",
    mask:true
})

setTimeout(function() {
    uni.hideLoading();
}, 1000);

提示彈窗 uni.showToast

有多種icon，例如：success 、error、fail等

//提示彈窗
uni.showToast({
    title:'成功提示',
    duration: 2000, //持續(xù)時間
    icon:"success"
})

//圖標(biāo)提示
uni.showToast({
    title: '查詢中',
    image:'../../static/logo.png',
    duration: 2000
})

確定取消框 uni.showModal

可以同時有確定和取消按鈕

//確定取消框
uni.showModal({
    title:"提示",
    content:"是否刪除?",
    confirmText:'刪除',
    confirmColor: '#4cd964',
    cancelText:'放棄',
    cancelColor:'#dd524d',
    success:(e) =>{
        if(e.confirm){
            console.log("確定");
        }else{
            console.log("取消");
        }

    }
})

列表提示框 uni.showActionSheet

從底部向上彈出操作菜單

// 列表提示框
uni.showActionSheet({
    itemList:['今天','明天','昨天'], //數(shù)組長度最大為6個
    itemColor:'#f0ad4e',
    success(res) {
        console.log(res.tapIndex); //用戶點擊的按鈕，從上到下的順序，從0開始
    },
    fail() {
        console.log("取消");
    }
})

數(shù)據(jù)緩存

同步緩存

//同步緩存
 uni.setStorageSync("Storage","jixin")		 //設(shè)置key value 存儲		
 console.log(uni.getStorageSync("Storage")); //通過key 獲取value

 uni.removeStorageSync("Storage");           //刪除某個key
 uni.clearStorageSync();					//全部刪除

異步緩存

//設(shè)置key value 存儲
uni.setStorage({ 				
 	key:"Storage",
	data:"world",
 	success() {
		console.log("=======異步緩存=======");
 	}
 })

//通過key 獲取value	
 uni.getStorage({
 	key:"Storage",
	success(res) {
		console.log( res.data);
 	}
 })
//刪除某個key
uni.removeStorage("Storage");
//全部刪除
uni.clearStorage();

獲取緩存數(shù)據(jù)

uni.getStorageInfo({
    success(res) {
        console.log(res.keys);
    }
})

跳轉(zhuǎn)

navigator 標(biāo)簽跳轉(zhuǎn)

open-type的參數(shù)

<navigator url="/pages/index/index" open-type="navigate">去非tabBar頁面</navigator>

<navigator url="/pages/home/home" open-type="switchTab">去tabBar頁面</navigator> 

編程式跳轉(zhuǎn)

1.uni.navigateTo

保留當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面，使用uni.navigateBack可以返回到原頁面。

參數(shù)與路徑之間使用?分隔，參數(shù)鍵與參數(shù)值用=相連，不同參數(shù)用&分隔；path為下一個頁面的路徑，下一個頁面的onLoad函數(shù)可得到傳遞的參數(shù)

uni.navigateTo({
      url: 'pages/main/main?id=1001&name=zhangsan',
      success: (res) => {
        console.log("跳轉(zhuǎn)Main", res);
      }
    })

2.uni.redirectTo

關(guān)閉當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面。

同上述uni.navigateTo的參數(shù)列表

uni.redirectTo({
	url: 'pages/main/main?id=1001&name=zhangsan
});

3.uni.reLaunch

關(guān)閉所有頁面，打開到應(yīng)用內(nèi)的某個頁面。

同上述uni.navigateTo的參數(shù)列表

uni.reLaunch({
	url: 'pages/main/main?id=1001&name=zhangsan'
});

4.uni.switchTab

跳轉(zhuǎn)到 tabBar 頁面，并關(guān)閉其他所有非 tabBar 頁面。

uni.switchTab({
	url: '/pages/home/home'
});

5.uni.navigateBack

關(guān)閉當(dāng)前頁面，返回上一頁面或多級頁面。文章來源地址http://www.zghlxwxcb.cn/news/detail-800223.html

uni.navigateBack({
	delta: 1
});

到了這里，關(guān)于uni-app基礎(chǔ)詳解（組件、彈窗、數(shù)據(jù)緩存、頁面跳轉(zhuǎn)）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！