uni-app基础详解（组件、弹窗、数据缓存、页面跳转）

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的参数值

<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的有效值

<!-- 数据绑定 -->
<!-- <input type="text" :value="msg" /> -->
<input type="text" v-model="msg" />

<!-- 密码框 -->
<input type="text" password placeholder="请输入密码" />
<input type="text" placeholder="请输入密码" />

radio 单选

单项选择器，内部由多个 <radio> 组成。通过把多个radio包裹在一个radio-group下，实现这些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多项选择器，内部由多个 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">网球</checkbox>
</checkbox-group>

picker 选择器

从底部弹起的滚动选择器。支持五种选择器，通过mode来区分，分别是普通选择器selector，多列选择器multiSelector，时间选择器time，日期选择器date，省市区选择器region，默认是普通选择器。

1.普通选择器selector

html

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

js

//数据	
index: 0,
    array: [{
        name: "中国"
    }, {
        name: "美国"
    }, {
        name: "俄罗斯"
    }]
//函数
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.省市区选择器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="请输入内容" auto-height></textarea>

弹窗

提示框 uni.showLoading

uni.showLoading一般不自动关闭，需要调用uni.hideLoading()关闭

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

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

提示弹窗 uni.showToast

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

//提示弹窗
uni.showToast({
    title:'成功提示',
    duration: 2000, //持续时间
    icon:"success"
})

//图标提示
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:['今天','明天','昨天'], //数组长度最大为6个
    itemColor:'#f0ad4e',
    success(res) {
        console.log(res.tapIndex); //用户点击的按钮，从上到下的顺序，从0开始
    },
    fail() {
        console.log("取消");
    }
})

数据缓存

同步缓存

//同步缓存
 uni.setStorageSync("Storage","jixin")		 //设置key value 存储		
 console.log(uni.getStorageSync("Storage")); //通过key 获取value

 uni.removeStorageSync("Storage");           //删除某个key
 uni.clearStorageSync();					//全部删除

异步缓存

//设置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();

获取缓存数据

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

跳转

navigator 标签跳转

open-type的参数

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

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

编程式跳转

1.uni.navigateTo

保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。

参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；path为下一个页面的路径，下一个页面的onLoad函数可得到传递的参数

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

2.uni.redirectTo

关闭当前页面，跳转到应用内的某个页面。

同上述uni.navigateTo的参数列表

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

3.uni.reLaunch

关闭所有页面，打开到应用内的某个页面。

同上述uni.navigateTo的参数列表

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

4.uni.switchTab

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

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

5.uni.navigateBack

关闭当前页面，返回上一页面或多级页面。

uni.navigateBack({
	delta: 1
});

代码007普通

打赏 收藏 海报 链接