ycwh/miniapp/pages/yuecai/location/index.vue

<template>
  <view class="width-100 height-100 view-page">
    <view class="p-10">
      <u-search :clearabled="true" placeholder="请输入搜索关键字" v-model="keyword" :shape="square" search="doRefresh" @custom="doRefresh"></u-search>
    </view>
    <u-list @scrolltolower="scrolltolower" height="calc(100% - 180px)" lowerThreshold="10">
      <u-list-item v-for="(item, index) in list" :key="index">
        <u-cell :title="item.name" @click="toDetail(item.id)">
          <u-avatar slot="icon" shape="square" size="35" :src="item.cover"
            customStyle="margin: -3px 5px -3px 0"></u-avatar>
        </u-cell>
      </u-list-item>
      <u-loadmore :status="page.status" :loading-text="page.loadingText" :loadmore-text="page.loadmoreText"
        :nomore-text="page.nomoreText" />
    </u-list>
  </view>
</template>

<script>
  import themeMixins from '@/pages/yuecai/mixins/themeMixins.js';
  export default {
    mixins: [themeMixins],
    data() {
      return {
        list1: [
          'https://cdn.uviewui.com/uview/swiper/swiper1.png',
          'https://cdn.uviewui.com/uview/swiper/swiper2.png',
          'https://cdn.uviewui.com/uview/swiper/swiper3.png',
        ],
        page: {
          current: 1,
          size: 10,
          total: 0,
          // loadmore loading nomore
          status: 'loadmore',
          loadingText: '正在加载中',
          loadmoreText: '上拉加载更多',
          nomoreText: '没有更多了'
        },
        keyword: '',
        list: []
      }
    },
    onShow() {
      this.keyword = '';
      this.doRefresh();
    },
    methods: {
      scrolltolower() {
        this.loadmore()
      },
      loadmore() {
        this.page.current++;
        this.getLocationList();
      },
      doRefresh() {
        this.page.current = 1;
        this.page.status = 'loadmore'
        this.list = [];
        this.getLocationList();
      },
      getLocationList() {

        if (this.page.status == 'loading' || this.page.status == 'nomore') {
          // 防止重复下拉
          return;
        }
        this.page.status = 'loading';
        //
        this.$u.api.getLocationList(this.page.current, this.page.size, {
          name: this.keyword || ''
        }).then(res => {
          if (res.data.records && res.data.records.length > 0) {
            this.list.push(...res.data.records)
          }
          this.page.total = res.data.total || 0;
          if (this.page.size * this.page.current >= res.data.total) {
            this.page.status = 'nomore'
          } else {
            this.page.status = 'loadmore'
          }
        })
      },
      toDetail(id) {
        uni.navigateTo({
          url: "/pages/yuecai/location/detail/index?id=" + id,
        })
      }
    },
  }
</script>

<style scoped lang="scss">
  .view-page {
    overflow: hidden;
  }
</style>