3.5 接收禮物組件(二) - 自動滾動 · UNI-APP實戰直播App

[toc] # 3.5 接收禮物組件(二) - 自動滾動 ## 3.5.1 實現禮物組件內容滾動效果 1. 將禮物組件封裝成獨立的組件 - 在根目錄在創建名稱為components的目錄 - 在components目錄下創建live文件夾 - 在live文件夾內創建f-gift.vue組件 - 將index.nvue組件的代碼剪切到f-gift組件中 - 在index.nvue組件中引入f-gift.vue組件,并對組件進行注冊與引用 ``` index.nvue組件的內容: <template> <view class="page">  <video class="flex-1" src="http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8" autoplay :controls="false"></video>  <view style="position: fixed; left: 0; right: 0;" :style="{top : `${statusBarHeight}px`}">  <view class="px-2 flex justify-between" style="height:80rpx;">  <view style="width: 325rpx; background-color: rgba(0,0,0,0.4);" class="flex align-center rounded-circle"> <view class="p"> <image src="../../static/tabbar/min.png" style="width: 70rpx; height: 70rpx;" class="rounded-circle"></image> </view>  <view class="flex-1 flex flex-column justify-center"> <text class="text-white font">昵稱</text> <text class="text-white font-sm">100</text> </view>  <view class="rounded-circle flex align-center bg-danger justify-center" style="width: 70rpx; height: 70rpx;"> <text class="text-white">+</text> </view> </view>  <view style="width: 325rpx; background-color: rgba(0,0,0,0.4);" class="flex align-center rounded-circle">  <scroll-view scroll-x="true" class="flex-1 flex"> <view class="p" v-for="(item,index) in 20" :key="index"> <image src="../../static/tabbar/min.png" style="width: 70rpx; height: 70rpx;" class="rounded-circle"></image> </view> </scroll-view>  <view class="rounded-circle flex align-center bg-danger justify-center" style="width: 70rpx; height: 70rpx;"> <text class="text-white font-sm">1000</text> </view> </view> </view>  <view class="px-2 my-2" style="height: 80rpx;"> <view style="width: 325rpx; background-color: rgba(0,0,0,0.4);" class="flex align-center rounded-circle"> <view class="p"> <text class="text-warning">金幣</text> </view> <view class="flex-1 flex flex-column justify-center"> <text class="text-white font">100</text> </view> </view> </view>  <f-gift></f-gift> </view>  <view class="bg-warning" style="position: fixed; bottom:120rpx; left: 0; right:0; width: 520rpx; height: 300rpx;"></view>  <view class="position-fixed right-0 bottom-0 left-0 bg-danger" style="height: 120rpx;"></view> </view> </template> <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; } } </script> <style> .page{ flex : 1; } </style> ``` ``` fgift組件的內容: <template>  <view style="height:500rpx;"> <scroll-view scroll-y="true" style="width: 520rpx; height: 500rpx;"> <view class="flex align-center px-3"> <view style="width: 325rpx; background-image: linear-gradient(to right,#BCABB1, #65AAF0);" class="flex align-center rounded-circle"> <view class="p"> <image src="../../static/tabbar/min.png" style="width: 70rpx; height: 70rpx;" class="rounded-circle"></image> </view> <view class="flex-1 flex flex-column justify-center"> <text class="text-white font">昵稱</text> <text class="text-white font-sm">送蛋糕</text> </view> <view class="p"> <image src="../../static/gift/1.png" style="width: 70rpx; height: 70rpx;" class="rounded-circle"></image> </view> </view> <text class="text-warning font-lg ml-1">X 100</text> </view> </scroll-view> </view> </template> <script> </script> <style> </style> ``` 2. 對禮物組件進行優化 - 使用nvue專屬的list的組件實現禮物組件,參考地址:https://uniapp.dcloud.io/component/list ![](https://img.kancloud.cn/1d/ee/1dee393749aaa81d981b8a26513221f8_2270x1214.png) ``` <template>  <list style="width: 520rpx; height: 500rpx;"> <cell class="flex align-center px-3"> <view style="width: 325rpx; background-image: linear-gradient(to right,#BCABB1, #65AAF0);" class="flex align-center rounded-circle"> <view class="p"> <image src="../../static/tabbar/min.png" style="width: 70rpx; height: 70rpx;" class="rounded-circle"></image> </view> <view class="flex-1 flex flex-column justify-center"> <text class="text-white font">昵稱</text> <text class="text-white font-sm">送蛋糕</text> </view> <view class="p"> <image src="../../static/gift/1.png" style="width: 70rpx; height: 70rpx;" class="rounded-circle"></image> </view> </view> <text class="text-warning font-lg ml-1">X 100</text> </cell> </list> </template> <script> </script> <style> </style> ``` 3. 使用v-for產生多個禮物組件 ``` <cell class="flex align-center px-3 pt-3" v-for="(item,index) in 10"> ``` ![](https://img.kancloud.cn/88/04/8804d028f83088203a61cc4aca79ca4b_596x1158.png) 4. 讓滾動條隱藏與取消回彈效果 ``` <list style="width: 520rpx; height: 500rpx;" :show-scrollbar="false" :bounce="false"> ``` ![](https://img.kancloud.cn/34/9c/349c053756af7f95f9ed040bb1e594d6_2222x832.png) 5. 設置插入動畫和刪除動畫 - 參考地址: https://uniapp.dcloud.io/component/cell ![](https://img.kancloud.cn/0a/37/0a37bf278de3a19ff7eaaa8b28650c2e_2254x948.png) ``` <cell insert-animation="default" delete-animation="default" class="flex align-center px-3 pt-3" v-for="(item,index) in 10" > ``` 6. 使用定時器模擬用戶動態發送禮物,并重新進行動態渲染 ``` <template>  <list style="width: 520rpx; height: 500rpx;" :show-scrollbar="false" :bounce="false"> <cell 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> 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 }) },3000) } } </script> <style> </style> ``` 7. 實現禮物自動往上滾動 - 參考地址: https://weex.apache.org/zh/docs/modules/dom.html#scrolltoelement ![](https://img.kancloud.cn/39/a3/39a31de3d7e702064d6b120b747d4f4d_2870x1364.png) ``` <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() },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],{}); } }) } } } </script> <style> </style> ```