wx-miniapp/src/pages/HuiQuanYi/OwnersNews/index.vue

<template>
  <view class="page YeZhuZiXun">
    <ScrollY :IsRefreshing="IsRefreshing" @Refresh="Refresh" @ScrollBottom="ScrollBottom">
      <view class="Container">

        <!-- 标题 -->
        <view class="Title">
          <image mode="heightFix" src="https://cjgw.oss-cn-hangzhou.aliyuncs.com/ygcxxfb/image/yezhuzixun.png"></image>
        </view>

        <!-- 列表 -->
        <view class="List" v-if="YeZhuZiXunList.length">
          <navigator url="./NewsDetail/index" hover-class="other-navigator-hover" v-for="(item, index) in YeZhuZiXunList" :key="index" class="Item flex-h">
            <view class="flex-item">
              <text>资讯标题</text>
              <text>4567</text>
            </view>
            <text class="iconfont iconjiantouright"></text>
          </navigator>
        </view>

      </view>
    </ScrollY>
  </view>
</template>

<script>
import ScrollY from '../../../components/ScrollY/index'
import { createNamespacedHelpers } from 'vuex'
const { mapState: mapIndexState, mapActions: mapIndexActions, mapMutations: mapIndexMutations } = createNamespacedHelpers('index')
export default {
  name: 'YeZhuZiXun',
  data () {
    return {
      PageData: {
        pageNum: 1,
        pageSize: 15
      },
      HasNextPage: true,
      IsRefreshing: false,
      DataLock: false
    }
  },
  computed: {
    ...mapIndexState({
      YeZhuZiXunList: x => x.YeZhuZiXunList // 业主资讯列表
    })
  },
  components: {
    ScrollY
  },
  created () {
    this.Init() // 初始化
  },
  methods: {
    ...mapIndexActions([
      'GetYeZhuZiXunList' // 获取资讯列表
    ]),
    ...mapIndexMutations([
      'EmptyYeZhuZiXunList' // 清空资讯列表
    ]),
    Init () { // 初始化
      this.PageData.pageNum = 1
      this.HasNextPage = true
      this.EmptyYeZhuZiXunList() // 清空资讯列表
      this.ToGetPageList() // 获取列表
    },
    ToGetPageList () { // 获取列表
      this.GetYeZhuZiXunList({ queryData: { accountId: 5, ...this.PageData } }).then((res) => { // 获取资讯列表
        this.HasNextPage = res.data.data.hasNextPage
        this.DataLock = false
        this.IsRefreshing = false
      }).catch(() => {
        this.DataLock = false
        this.IsRefreshing = false
      })
    },
    ScrollBottom () { // 上拉加载
      if (this.DataLock || !this.HasNextPage) return
      this.DataLock = true
      this.PageData.pageNum += 1
      this.ToGetPageList() // 获取列表
    },
    Refresh (e) { // 页面下拉刷新
      if (this.DataLock) return
      this.DataLock = true
      this.IsRefreshing = true
      setTimeout(() => {
        this.Init() // 初始化
      }, 1000)
    }
  }
}
</script>

<style lang="scss">
@import "page.scss";
</style>