[toc] # 3.6 接收禮物組件(三) = 自動消失 ## 3.6.1 實現禮物組件自動消失 ``` <template> <!-- 禮物 --> <list style="width: 520rpx; height: 500rpx;" :show-scrollbar="false" :bounce="false"> <cell :ref="'item' + index" insert-animation="default" delete-animation="default" class="flex align-center px-3 pt-3" v-for="(item,index) in gifts" :key="index"> <view style="width: 325rpx; background-image: linear-gradient(to right,#BCABB1, #65AAF0);" class="flex align-center rounded-circle"> <view class="p"> <image :src="item.avatar || defaultAvatar" style="width: 70rpx; height: 70rpx;" class="rounded-circle"></image> </view> <view class="flex-1 flex flex-column justify-center"> <text class="text-white font">{{item.username}}</text> <text class="text-white font-sm">{{item.gift_name}}</text> </view> <view class="p"> <image :src="item.gift_image" style="width: 70rpx; height: 70rpx;" class="rounded-circle"></image> </view> </view> <text class="text-warning font-lg ml-1">X {{item.num}}</text> </cell> </list> </template> <script> const dom = weex.requireModule('dom') export default { data(){ return { defaultAvatar : "/static/tabbar/min.png", gifts : [] } }, created(){ setInterval(()=>{ this.gifts.push({ username : "發送人", avatar : "", gift_name : "蛋糕", gift_image : "/static/gift/3.png", num : 1 }) this.toBottom() this.autoHide() },3000) }, methods : { //置于底部 toBottom(){ this.$nextTick(()=>{ let index = this.gifts.length - 1; let ref = 'item' + index; if(this.$refs[ref]){ dom.scrollToElement(this.$refs[ref][0],{}); } }) }, //自動消失 autoHide(){ if(this.gifts.length){ let timer = setTimeout(()=>{ this.gifts.splice(0,1); },5000) } } } } </script> <style> </style> ``` ## 3.6.2 代碼進行封裝優化 1. 封裝送禮物方法 ``` <script> const dom = weex.requireModule('dom') export default { data(){ return { defaultAvatar : "/static/tabbar/min.png", gifts : [] } }, methods : { //送禮物 send(gift){ this.gifts.push(gift); this.toBottom() this.autoHide() }, //置于底部 toBottom(){ this.$nextTick(()=>{ let index = this.gifts.length - 1; let ref = 'item' + index; if(this.$refs[ref]){ dom.scrollToElement(this.$refs[ref][0],{}); } }) }, //自動消失 autoHide(){ if(this.gifts.length){ let timer = setTimeout(()=>{ this.gifts.splice(0,1); },5000) } } } } </script> ``` 2. 在live.nvue組件中通過ref綁定f-gift組件 ``` <!-- 禮物 --> <f-gift ref="gift"></f-gift> ``` 3. 通過refs獲取f-gift內的send方法并進行調用,3秒鐘之后傳遞禮物的數據 ``` <script> import fGift from "../../components/live/f-gift.vue" export default { data(){ return { statusBarHeight : 0 } }, components: { fGift }, onLoad(){ //獲取通知欄的高度 let res = uni.getSystemInfoSync(); this.statusBarHeight = res.statusBarHeight; }, mounted(){ setInterval(()=>{ this.$refs.gift.send({ username : "發送人", avatar : "", gift_name : "蛋糕", gift_image : "/static/gift/3.png", num : 1 }) },3000) } } </script> ```