unicloud-db 在微信小程序端渲染效果与预期不一致

分类：uniCloud

uniCloud

<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" class="next-order-list">  
          <swiper-item class="swiper-item" v-for="(tab,i) in list" :key="tab.name">  
            <scroll-view scroll-y class="next-order-list" @scrolltolower="onreachBottom">  
              <view class="clear-u-card"></view>  
              <view v-if="tab.content" >  
                <unicloud-db ref="udb" v-slot:default="{data, loading, error, options, hasMore, pagination}"  
                  collection="data-order" :where="tab.where" orderby="create_time desc" page-data="add" :page-size="10" @load="load">  

                  <view >  
                    <u-card v-for="(item) in data" :key="item._id" padding="0" :show-head="false">  
                            //这里写面板内容  
                      </view>  
                    </u-card>  
                  </view>  

                  <u-divider bg-color="#f1f1f1" v-if="loading" height="80">  
                    <view>加载中...</view> <!-- 加载的时候loading=true -->  
                  </u-divider>  
                  <view v-else-if="hasMore">  
                    <!-- 不执行任何 -->  
                  </view>  
                  <u-divider bg-color="#f1f1f1" v-else-if="data.length > 0" height="80">  
                    <view>没有更多了</view> <!-- 默认是hasMore是false -->  
                  </u-divider>  
                  <view class="flex align-center justify-center next-order-list" v-else>  
                    <next-empty></next-empty>  
                  </view>  
                </unicloud-db>  
              </view>  
            </scroll-view>  
          </swiper-item>  
        </swiper>

我是考虑由多个swiper-item，每个里面都使用unicloud-db组件，<view v-if="tab.content" >是用于延时加载数据，只是第一次滑动到swiper-item才会触发unicloud-db，在H5上该效果符合预期。
但在微信小程序，不管是开发者工具还是体验版，该效果很差，经常是loading 一直都是true（不能这么说，应该是loading变从true变成false，渲染出来data，然后又变成true，无法渲染data），不会变成false，但日志其实是已经触发加载，并且在@load="load" 回调中是有data的。效果就是一闪而过，然后只显示加载中...

不止啊。感觉是多个unicloud-db组件在小程序上的效果~ 不对，里面经常取不到data

2022-05-27 01:03 负责人:无分享

2 个回复

DCloud_uni-ad_HDX

请提供一个简单的测试工程

1***@163.com (作者)

在页面v-for unicloud-db 多个组件，现在方式用这种方式了。。等后面有时间我在整理个测试工程。

直接用jql语法来写了，模拟unicloud-db方式，这样在H5和小程序效果一样

2022-05-27 12:20
1***@163.com (作者)

回复 1***@163.com: 不用 v-for unicloud-db 这种方式了，测试好多遍，感觉内部的{data, loading}，绑定是错误的

2022-05-27 12:21

1***@163.com (作者)

//加载当前页  
      async loadData() {  
        const tab = this.list[this.current];  
        const {where, udb} = tab;  
        const pageSize = 10;  
        if(udb.hasMore) {  
          const db = uniCloud.database();  
          const skip = (udb.page - 1) * pageSize;  
          udb.loading = true;  
          const {result} = await db.collection('data-order').where(where).orderBy('create_time desc').skip(skip).limit(pageSize + 1).get();  
          const {data} = result;  
          udb.hasMore = data.length > pageSize; //提前。  
          udb.loading = false;  
          udb.page = udb.page + 1; //更新为下一页  
          await this.load(data);  
          const pageData = data.slice(0, pageSize); //只取每页的数据  
          udb.data.push(...pageData);  

        }  
      },  
      //刷新当前页  
      refresh() {  
        const tab = this.list[this.current];  
        //重置tab.udb  
        tab.udb = { loading: true, hasMore: true, data:[], page: 1};  
        this.loadData();  
      },

该问题目前已经被锁定, 无法添加新回复

unicloud-db 在微信小程序端渲染效果与预期不一致

2 个回复

公告

相关问题

unicloud-db 在微信小程序端 渲染效果与预期不一致

与内容相关的链接

2 个回复

公告

相关问题

unicloud-db 在微信小程序端渲染效果与预期不一致