unicloud云开发进阶16-loadtime延迟加载及事件方法

loadtime 加载数据的时机

有三个默认值 默认auto、 onready、 manual 有些时候不希望数据立即展示时可以用这个方法

值	类型	描述
auto	String	页面就绪后或属性变化后加载数据，默认为auto
onready	String	页面就绪后不自动加载数据，属性变化后加载。适合在onready中接收上个页面的参数作为where条件时。
manual	String	手动模式，不自动加载数据。如果涉及到分页，需要先手动修改当前页，再调用加载数据

例如做详情页，涉及到页面之间的参数传递，就需要保证拿到参数之后再显示数据

<template>
  <view>
    <unicloud-db v-slot:default="{data, loading, error, options}" collection="cloudDemo,uni-id-users" 
    orderby="posttime desc"
    field="title,content,posttime,userid{username,avatar_file}"
    loadtime="manual"
    >

页面不展示内容了

loadData() 方法

文档在unicloud $\rightarrow$ 云数据库 $\rightarrow$ unicloud-db前端组件 $\rightarrow$ 方法 $\rightarrow$ loadData中

原生js获取DOM体内容是通过document.getElementById()获取DOM体的内容 VUE是通过$refs获取 通过给unicloud-db组件设置ref属性，通过$refs属性获取到DOM体的属性udb，然后给他添加方法

this.$refs.udb.loadData()

<template>
  <view>
    <unicloud-db v-slot:default="{data, loading, error, options}" collection="cloudDemo,uni-id-users" 
    orderby="posttime desc"
    field="title,content,posttime,userid{username,avatar_file}"
    loadtime="manual"
    ref="udb"
    >
       
      <view v-if="error">{{error.message}}</view>
      <view v-else-if="loading">
        <uni-load-more status="loading"></uni-load-more>
      </view>
      <view v-else>
        <uni-list>
          <uni-list-item v-for="item in data" 
          :title="item.title" 
          :note="item.content"
          :thumb="item.userid[0].avatar_file.url"
          :right-text="item.userid[0].username"
          ></uni-list-item>
        </uni-list>
      
      </view>
    </unicloud-db>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        mywhere:"userid == $cloudEnv_uid"
      };
    },
    methods:{},
    onLoad() {
      
    },
    onReady() {
      this.$refs.udb.loadData()
    }
  }
</script>

也可以写一个按钮，通过给按钮写点击事件，把loadData方法写在这个点击事件里，一开始进入页面没有数据，点击按钮后才加载数据

<template>
  <view>
    <button @click="getDate">加载</button>
    <unicloud-db v-slot:default="{data, loading, error, options}" collection="cloudDemo,uni-id-users" 
    orderby="posttime desc"
    field="title,content,posttime,userid{username,avatar_file}"
    loadtime="manual"
    ref="udb"
    >
       
      <view v-if="error">{{error.message}}</view>
      <view v-else-if="loading">
        <uni-load-more status="loading"></uni-load-more>
      </view>
      <view v-else>
        <uni-list>
          <uni-list-item v-for="item in data" 
          :title="item.title" 
          :note="item.content"
          :thumb="item.userid[0].avatar_file.url"
          :right-text="item.userid[0].username"
          ></uni-list-item>
        </uni-list>
      
      </view>
    </unicloud-db>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        mywhere:"userid == $cloudEnv_uid"
      };
    },
    methods:{
      getDate(){
        this.$refs.udb.loadData()
      }
    },
    onLoad() {
      
    },
    onReady() {
      
    }
  }
</script>

进入页面

点击按钮加载数据

remove方法

点击某一项，删掉数据 给uni-list写点击事件要先开启点击事件才有效，否则是没有作用的 在点击事件里，把点击的当前项id作为参数传递给点击事件

clickable="true"
@click="onRemove(item._id)"

<template>
  <view>
    <button @click="getDate">加载</button>
    <unicloud-db v-slot:default="{data, loading, error, options}" collection="cloudDemo,uni-id-users" 
    orderby="posttime desc"
    field="title,content,posttime,userid{username,avatar_file}"
    loadtime="manual"
    ref="udb"
    >
       
      <view v-if="error">{{error.message}}</view>
      <view v-else-if="loading">
        <uni-load-more status="loading"></uni-load-more>
      </view>
      <view v-else>
        <uni-list>
          <uni-list-item v-for="item in data" 
          :title="item.title" 
          :note="item.content"
          :thumb="item.userid[0].avatar_file.url"
          :right-text="item.userid[0].username"
          clickable="true"
          @click="onRemove(item._id)"
          ></uni-list-item>
        </uni-list>
      
      </view>
    </unicloud-db>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        mywhere:"userid == $cloudEnv_uid"
      };
    },
    methods:{
      onRemove(id){
        this.$refs.udb.remove(id)
      },
      getDate(){
        this.$refs.udb.loadData()
      }
    },
    onLoad() {
      
    },
    onReady() {
      
    }
  }
</script>

点击任意一条数据后，由于权限校验未通过，所以没删掉，两个模态框是框架自带的

权限在database目录下的自定义的数据结构cloudDemo 之前是这样定义的。当前用户是登录用户才能操作，直接把这一项改成true，删除也改成true

{
	"bsonType": "object",
	"required": ["title"],
	"permission": {
		"read": true,
		"create": "auth.uid != null",
		"update": true,
		"delete": true
	},

点击这一条，数据就被删除了，而且，数据库中的数据也被删除了

add 添加

写一个点击事件，点击按钮添加两个字符串，一个title，一个content

<template>
  <view>
    <button @click="getDate">加载</button>
    <button @click="addData">添加</button>
    <unicloud-db v-slot:default="{data, loading, error, options}" collection="cloudDemo,uni-id-users" 
    orderby="posttime desc"
    field="title,content,posttime,userid{username,avatar_file}"
    loadtime="manual"
    ref="udb"
    >
       
      <view v-if="error">{{error.message}}</view>
      <view v-else-if="loading">
        <uni-load-more status="loading"></uni-load-more>
      </view>
      <view v-else>
        <uni-list>
          <uni-list-item v-for="item in data" 
          :title="item.title" 
          :note="item.content"
          :thumb="item.userid[0].avatar_file.url"
          :right-text="item.userid[0].username"
          clickable
          @click="onRemove(item._id)"
          ></uni-list-item>
        </uni-list>
      
      </view>
    </unicloud-db>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        mywhere:"userid == $cloudEnv_uid"
      };
    },
    methods:{
      addData(){
        let obj={
          title:"add",
          content:"udb为unicloud-db组件的ref属性值"
        }
        this.$refs.udb.add(obj)
      },
      onRemove(id){
        this.$refs.udb.remove(id)
      },
      getDate(){
        this.$refs.udb.loadData()
      }
    },
    onLoad() {
      
    },
    onReady() {
      
    }
  }
</script>

点击添加后，再次刷新页面，添加的数据会被渲染到页面，因为上面把loadtime自动渲染关闭了，改成auto就能不刷新就渲染到页面

重新加载数据

refresh清空并重新加载当前页数据 clear是清空已加载数据，但不会重置当前分页信息 把这个方法放在添加方法里执行

      addData(){
        let obj={
          title:"update",
          content:"udb为unicloud-db组件的ref属性值"
        }
        this.$refs.udb.add(obj)
        this.$refs.udb.refresh()
      },

因为重新加载数据是放在添加数据方法里执行的，所以两个方法会同时运行，页面刷新看起来有抖动 在加载成功的回调函数里写数据重载

<template>
  <view>
    <button @click="getDate">加载</button>
    <button @click="addData">添加</button>
    <unicloud-db v-slot:default="{data, loading, error, options}" collection="cloudDemo,uni-id-users" 
    orderby="posttime desc"
    field="title,content,posttime,userid{username,avatar_file}"
    loadtime="auto"
    ref="udb"
    >
       
      <view v-if="error">{{error.message}}</view>
      <view v-else-if="loading">
        <uni-load-more status="loading"></uni-load-more>
      </view>
      <view v-else>
        <uni-list>
          <uni-list-item v-for="item in data" 
          :title="item.title" 
          :note="item.content"
          :thumb="item.userid[0].avatar_file.url"
          :right-text="item.userid[0].username"
          clickable
          @click="onRemove(item._id)"
          ></uni-list-item>
        </uni-list>
      
      </view>
    </unicloud-db>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        mywhere:"userid == $cloudEnv_uid"
      };
    },
    methods:{
      addData(){
        let obj={
          title:"update",
          content:"udb为unicloud-db组件的ref属性值"
        }
        this.$refs.udb.add(obj,{
          toastTitle:"新增成功",
          // 新增成功后的回调
          success:(res)=>{
            const {code, message} =res
            this.$refs.udb.refresh()
          },
        })
      },
      onRemove(id){
        this.$refs.udb.remove(id)
      },
      getDate(){
        this.$refs.udb.loadData()
      }
    },
    onLoad() {
      
    },
    onReady() {
      
    }
  }
</script>
    ```

![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/894ac85d15134ce2a7896fdd31cc179e~tplv-k3u1fbpfcp-watermark.image?)