生命周期函數(shù)
image.png
<template>
<view class="content">
<uni-calendar
:insert="true"
:lunar="true"
:start-date="'2019-3-2'"
:end-date="'2019-5-20'"
></uni-calendar>
<testList :title="msg" @myEdits="getNums"></testList>
<text>子組件傳遞的數(shù)據(jù){{num}}</text>
<testa> </testa>
<testb> </testb>
<view class="text-area">
<image v-for="(item,i) in imgArrs" :src="item" @click="perivImgs(item)"></image>
樣式
</view>
<view class="iconfont icon-ningmeng-01" style="color:red"></view>
<button @click="but(2,$event)">點(diǎn)擊$event</button>
<button @click="pull">點(diǎn)擊頁面刷新</button>
<button @click="getUrls">發(fā)送數(shù)據(jù)請求</button>
<button @click="setSlosge">異步設(shè)置存儲</button>
<button @click="getSlosge">異步獲取存儲</button>
<button @click="removeSlosge">異步移除存儲</button>
<button @click="asyncLoacl">同步設(shè)置數(shù)據(jù)存儲</button>
<button @click="chooseImsgs">上傳圖片</button>
<navigator url="/pages/datail/datail">跳轉(zhuǎn)詳情頁面</navigator>
<navigator url="/pages/message/message" open-type="switchTab">跳轉(zhuǎn)tabar頁面</navigator>
<navigator url="/pages/datail/datail" open-type="redirect">跳轉(zhuǎn)（沒有箭頭返回）</navigator>
<button @click="goUrls">編程導(dǎo)航，點(diǎn)擊跳轉(zhuǎn)</button>
<button @click="messUrs">編程導(dǎo)航，跳轉(zhuǎn)taber頁面</button>
<button @click="deatisur">編程導(dǎo)航，跳轉(zhuǎn)詳情，關(guān)閉當(dāng)前頁面</button>
<!-- #ifdef H5 -->
<view>在h5可見（條件編譯）</view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view>在小程序中可見（條件編譯）</view>
<!-- #endif -->
</view>
</template>
<script>
//引入一個(gè)組件
import test from '../../components/test.vue'
import testa from '../../components/a.vue'
import testb from '../../components/b.vue'
//下載導(dǎo)入日歷組件
import uniCalendar from '../../components/uni-calendar/uni-calendar.vue'
export default {
components: {
testList: test,
testa,
testb,
uniCalendar,
},
data() {
return {
msg: 'msg(父組件)',
title: '允許選中',
imgArrs: [],
num: '',
}
},
//監(jiān)聽頁面下拉刷新
onPullDownRefresh: function() {
console.log('觸發(fā)了下拉刷新')
setTimeout(() => {
console.log('延遲下拉刷新')
uni.stopPullDownRefresh()
}, 2000)
},
//監(jiān)聽頁面上拉加載
onReachBottom: function() {
console.log('頁面觸底了')
},
onLoad(options) {
// #ifdef H5
console.log('h5打印')
// #endif
// #ifdef MP-WEIXIN
console.log('微信打印')
// #endif
console.log('頁面加載')
console.log('可以獲取上個(gè)頁面?zhèn)鬟f的參數(shù)', options)
},
onShow: function() {
console.log('頁面顯示了')
},
onReady: function() {
console.log('頁面初次加載完成')
},
onHide: function() {
console.log('頁面隱藏了')
},
methods: {
change(e) {
console.log(e);
},
but(n, e) {
console.log(n, e)
},
//點(diǎn)擊刷新方法：
pull() {
uni.startPullDownRefresh()
},
//發(fā)送數(shù)據(jù)請求：
getUrls() {
uni.request({
url: 'https://api.apiopen.top/getJoke?page=1&count=2&type=video',
success(res) {
console.log(res)
}
})
},
//設(shè)置存儲數(shù)據(jù)
setSlosge() {
uni.setStorage({
key: 'id',
data: 80,
success() {
console.log('存儲成功')
}
})
},
//獲取數(shù)據(jù)
getSlosge() {
uni.getStorage({
key: 'id',
success(res) {
console.log('獲取成功', res)
}
})
},
//移除存儲：
removeSlosge() {
uni.removeStorage({
key: 'id',
success() {
console.log('刪除成功')
}
})
},
//同步設(shè)置存儲
asyncLoacl() {
//設(shè)置
uni.setStorageSync('num', 101)
//獲取
const res1 = uni.getStorageSync('num')
console.log(res1)
//刪除
setTimeout(() => {
uni.removeStorageSync('num')
}, 2000)
},
//上傳圖片：
chooseImsgs() {
uni.chooseImage({
count: 5, //h5中限制不住
success: res => {
console.log(res)
this.imgArrs = res.tempFilePaths
}
})
},
//點(diǎn)擊圖片預(yù)覽：
perivImgs(current) {
console.log(current)
uni.previewImage({
current,
urls: this.imgArrs,
indicator: 'number'
})
},
//編程導(dǎo)航點(diǎn)擊跳轉(zhuǎn)
goUrls() {
uni.navigateTo({
url: '/pages/datail/datail?id=80'
})
},
//編程導(dǎo)航跳轉(zhuǎn)tabar
messUrs() {
uni.switchTab({
url: '/pages/message/message'
})
},
//跳轉(zhuǎn)到詳情關(guān)閉當(dāng)前頁面
deatisur() {
uni.redirectTo({
url: '/pages/datail/datail'
})
},
//獲取子組件數(shù)據(jù)：
getNums(num) {
console.log(num)
this.num = num
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
/* #ifdef H5*/
.text-area {
width: 750rpx;
height: 1350rpx;
background: red;
}
/* #endif */
/* #ifdef MP-WEIXIN*/
.text-area {
width: 750rpx;
height: 1350rpx;
background: #007AFF;
}
/* #endif */
.title {
font-size: 36rpx;
color: #8f8f94;
}
.box-active {
background: red;
}
</style>
<template>
<view>
a組件{{num}}
<button @click="addNums">修改B組件數(shù)據(jù)</button>
</view>
</template>
<script>
export default {
data() {
return {
num:1
}
},
beforeCreate() {
},
methods: {
addNums(){
uni.$emit('updateNum',10)
}
},
created() {
},
mounted() {
}
}
</script>
<style>
</style>
<template>
<view>
b組件{{num}}
</view>
</template>
<script>
export default {
data() {
return {
num:2
}
},
beforeCreate() {
},
methods: {
},
created() {
uni.$on('updateNum',num=>{
this.num+=num
})
},
mounted() {
}
}
</script>
<style>
</style>
<template>
<view>
test
<text>父組件傳遞的數(shù)據(jù)：{{title}}</text>
<button @click="dataFuter()">點(diǎn)擊（給父組件傳數(shù)據(jù)）</button>
</view>
</template>
<script>
export default {
data() {
return {
nums:68
}
},
props:['title'],
beforeCreate() {
console.log('組件初始化')
},
methods: {
dataFuter(){
//定義自定義事件
this.$emit('myEdits',this.nums)
}
},
created() {
console.log('數(shù)據(jù)')
},
mounted() {
console.log('demo')
}
}
</script>
<style>
</style>
