uni-app 130发送收藏功能

简介: uni-app 130发送收藏功能


/pages/my/fava/fava.vue

<template>
  <view class="page">
    <!-- 导航栏 -->
    <free-nav-bar title="我的收藏" showBack :showRight="false"></free-nav-bar>
    <view class="pt-3 px-3" v-for="(item,index) in list" :key="index" @longpress="long(item,index)" @click="send(item)">
      <view class="bg-white rounded p-3">
        <text v-if="item.type == 'text'">{{item.data}}</text>
        <free-image v-else-if="item.type == 'image' || item.type == 'emoticon'" :src="item.data"></free-image>
        <video v-else-if="item.type == 'video'" style="width: 500rpx;height: 400rpx;" :poster="item.options.poster" :src="item.data" controls></video>
      </view>
    </view>
    
    <!-- 上拉加载 -->
    <view class="flex align-center justify-center py-5 bg-light" v-if="list.length >= 10">
         <text class="text-muted font">{{loadmore}}</text>
    </view>
  </view>
</template>
<script>
  import freeNavBar from '@/components/free-ui/free-nav-bar.vue';
  import freeImage from '@/components/free-ui/free-image.vue';
  import $H from '@/common/free-lib/request.js';
  export default {
    components:{
      freeNavBar,
      freeImage
    },
    data() {
      return {
        page:1,
        list:[],
        type:'',
        loadmore:'上拉加载中', // 没有更多了 加载中...
      }
    },
    onLoad(e) {
      if(e.type){
        this.type = e.type;
      }
      this.page = 1;
      this.getData();
    },
    onPullDownRefresh() {
      this.page = 1;
      this.getData().then(res=>{
        uni.stopPullDownRefresh(); // 关闭下拉刷新状态
      })
    },
    onReachBottom() {
      this.page+=1;
      this.getData().catch(err=>{
        this.page -= 1;
      })
    },
    methods: {
      send(item){
        if(this.type !== 'send'){
          return;
        }
        uni.$emit('sendItem',{
          sendType:'fava',
          ...item
        });
        uni.navigateBack({
          delta:1
        });
      },
      long(item,index){
        uni.showActionSheet({
          itemList: ['删除'],
          success: res => {
            if(res.tapIndex !== 0) return;
            uni.showModal({
              content: '是否要删除该收藏?',
              success: res => {
                if(res.cancel){
                  return;
                }
                $H.post('/fava/destroy',{
                  id:item.id
                }).then(res=>{
                  uni.showToast({
                    title:'删除成功',
                    icon:'none'
                  });
                  this.list.splice(index,1);
                })
              },
              fail: () => {},
              complete: () => {}
            });
          },
          fail: () => {},
          complete: () => {}
        });
      },
      getData(){
        return new Promise((result,reject)=>{
          $H.get('/fava/'+this.page).then(res=>{
            let list = res.map(item=>{
              item.options = JSON.parse(item.options);
              return item;
            });
            this.list = this.page === 1 ? list : [...this.list,...list];
            this.loadmore = this.list.length == this.page * 10 ? '上拉加载更多' : '没有更多了';
            result(res);
          }).catch(err=>{
            reject(err);
          })
        })
      }
    }
  }
</script>
<style>
</style>

如下是我测试的截图

感谢大家观看,我们下次见

目录
相关文章
|
22天前
uni-app 155朋友圈评论功能(二)
uni-app 155朋友圈评论功能(二)
51 0
|
22天前
uni-app 152朋友圈动态实时通知功能
uni-app 152朋友圈动态实时通知功能
26 0
|
22天前
uni-app 122转发功能实现(二)
uni-app 122转发功能实现(二)
30 0
|
22天前
uni-app 121转发功能实现(一)
uni-app 121转发功能实现(一)
24 0
|
22天前
uni-app 179转发名片功能
uni-app 179转发名片功能
24 1
|
22天前
uni-app 165查看聊天记录功能
uni-app 165查看聊天记录功能
30 1
|
22天前
uni-app 154朋友圈评论功能(一 )
uni-app 154朋友圈评论功能(一 )
32 0
|
22天前
uni-app 162初始化会话列表功能
uni-app 162初始化会话列表功能
18 0
|
22天前
uni-app 160提醒谁看功能
uni-app 160提醒谁看功能
13 0
|
22天前
|
存储 数据库
uni-app 156朋友圈评论表情包功能
uni-app 156朋友圈评论表情包功能
48 0

热门文章

最新文章