uniapp 自定义底部tabber 的下拉加载

致橡树丶

于 2024-01-15 10:45:52 发布

阅读量412

点赞数 8

文章标签： uni-app 数据库前端

本文链接：https://blog.csdn.net/qq_45777315/article/details/135595443

版权

<template>
  <view class="allheaders">

    <scroll-view v-if="atentionList.length > 0" scroll-y="true" @scrolltolower="loadMore()" :style="{ height: scrollH + 'rpx' }">
      <view class="firstBox">
        <view class="boxInfo" v-for="(item, index) in atentionList" :key="index">
         

			<view class="leftcss">
				<view class="titlecss">
					{{ item.title }}
				</view>
				<view class="contentcss">
					{{ item.content }}
				</view>
				<view class="timecss">
					{{ item.time }}
				</view>
			</view>
			<view class="imgcss">
				<image :src="item.url" class="img"></image>
			</view>
		
          
        </view>
        <view class="pagesStatus" @click="loadMore()">
          {{ pages == pageNumber ? '到底了~' : '加载更多' }}
		  
        </view>
      </view>
    </scroll-view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      pages: 1,
      pageNumber: 0,
      atentionList: [],
      //获取滚动距离
      scrollH: 0,

    }
  },
  onShow() {
    this.scrollH = this.scrollHs()
  },
  mounted() {
    this.attentionList()
  },
  methods: {
    // 获取开始滚动距离
    scrollHs() {
      let sys = uni.getSystemInfoSync()
      let winWidth = sys.windowWidth
      let winrate = 750 / winWidth
      let winHeight = parseInt(sys.windowHeight * winrate)
      return winHeight - 20
    },
    // 列表
    attentionList() {
      this.atentionList=[{
      	"title":"第一次通知",
      	"content":"会计核算洞口防护康定斯基发哈我诶不拿科技大刷卡机符合我ski",
      	"time":"2023-05-06",
      	"url":"https://img1.baidu.com/it/u=30477458,3592652326&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
      	},{
      	"title":"通知通知",
      	"content":"会计核算洞口防护康定斯基发哈我诶不拿科技大刷卡机符合我ski",
      	"time":"2023-05-06",
      	"url":"https://img1.baidu.com/it/u=30477458,3592652326&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
      	},{
      	"title":"重要通知",
      	"content":"会计核算洞口防护康定斯基发哈我诶不拿科技大刷卡机符合我ski",
      	"time":"2023-05-06",
      	"url":"https://img1.baidu.com/it/u=30477458,3592652326&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
      	},{
      	"title":"重要通知",
      	"content":"会计核算洞口防护康定斯基发哈我诶不拿科技大刷卡机符合我ski",
      	"time":"2023-05-06",
      	"url":"https://img1.baidu.com/it/u=30477458,3592652326&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
      	},{
      	"title":"第一次通知",
      	"content":"会计核算洞口防护康定斯基发哈我诶不拿科技大刷卡机符合我ski",
      	"time":"2023-05-06",
      	"url":"https://img1.baidu.com/it/u=30477458,3592652326&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
      	},{
      	"title":"通知通知",
      	"content":"会计核算洞口防护康定斯基发哈我诶不拿科技大刷卡机符合我ski",
      	"time":"2023-05-06",
      	"url":"https://img1.baidu.com/it/u=30477458,3592652326&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
      	},{
      	"title":"重要通知",
      	"content":"会计核算洞口防护康定斯基发哈我诶不拿科技大刷卡机符合我ski",
      	"time":"2023-05-06",
      	"url":"https://img1.baidu.com/it/u=30477458,3592652326&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
      	},{
      	"title":"重要通知",
      	"content":"会计核算洞口防护康定斯基发哈我诶不拿科技大刷卡机符合我ski",
      	"time":"2023-05-06",
      	"url":"https://img1.baidu.com/it/u=30477458,3592652326&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
      	},{
      	"title":"第一次通知",
      	"content":"会计核算洞口防护康定斯基发哈我诶不拿科技大刷卡机符合我ski",
      	"time":"2023-05-06",
      	"url":"https://img1.baidu.com/it/u=30477458,3592652326&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
      	},{
      	"title":"通知通知",
      	"content":"会计核算洞口防护康定斯基发哈我诶不拿科技大刷卡机符合我ski",
      	"time":"2023-05-06",
      	"url":"https://img1.baidu.com/it/u=30477458,3592652326&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
      	},{
      	"title":"重要通知",
      	"content":"会计核算洞口防护康定斯基发哈我诶不拿科技大刷卡机符合我ski",
      	"time":"2023-05-06",
      	"url":"https://img1.baidu.com/it/u=30477458,3592652326&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
      	},{
      	"title":"重要通知",
      	"content":"会计核算洞口防护康定斯基发哈我诶不拿科技大刷卡机符合我ski",
      	"time":"2023-05-06",
      	"url":"https://img1.baidu.com/it/u=30477458,3592652326&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
      	},
      	]
    },
    // 加载更多
    loadMore() {
      if (this.pages > this.pageNumber) {
        // this.attentionList()
		console.log('jiazia+++++++++++++++++')
		this.atentionList.push({
      	"title":"重要通知",
      	"content":"1111111111111111111111111111111111111",
      	"time":"2023-05-06",
      	"url":"https://img1.baidu.com/it/u=30477458,3592652326&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
      	})
      }
    },
  },
}
</script>