zyejMAll-mobile/pages/community/community.vue

<template>
	<s-layout title="社区种草">
		<view class="search_box">
			<view class="ss-flex ss-col-center">
			  <uni-search-bar
			    class="ss-flex-1"
			    radius="33"
			    placeholder="请输入关键字"
			    cancelButton="none"
			    :focus="true"
			    @confirm="onSearch($event.value)"
			  />
			</view>
		</view>
		<view class="nav-bd longTab" style="background-color: white;">
			<scroll-view scroll-x="true" style="white-space: nowrap; display: flex" >
				<view class="longItem"
					:style="'color:' + (index == ProductNavindex ? '#e93323' : 'black')+';--color:#e93323'"
					:data-index="index" :class="index===ProductNavindex?'click':''" v-for="(item,index) in navList"
					:key="index" :id="'id'+index" @click="ProductNavTab(item, index)">{{ item.val }}
				</view>
			</scroll-view>
		</view>
		<view class="discover-box" :style="'height:'+swiperHeight+'px'">
			<!-- 发现 -->
			<scroll-view 
			:style="'height:'+swiperHeight+'px'"
			      class="scroll-view" 
			      scroll-y 
			      :refresher-enabled="true" 
			      @refresherrefresh="onRefresh" 
			      :refresher-triggered="triggered"
			      @scrolltolower="handleScrollToLower"
			    >
			      <!-- 列表内容 -->
			      <!-- <view v-for="(item, index) in list" :key="index" class="scroll-item">{{ item }}</view> -->

				  <grid-view type="masonry" main-axis-gap="{{10}}" cross-axis-gap="{{10}}">
				              <view class="masonry_item" v-for="(item, index) in arr" :key="index" :style="getStyle(item)">
				                  {{item}}
				              </view>
				          </grid-view>
				  
				  
				  
			
			      <!-- 加载更多提示 -->
			      <view v-if="loadingMore" class="loading-more">加载中...</view>
			      <view v-else-if="noMoreData" class="no-more-data">没有更多数据了</view>
			    </scroll-view>
		</view>
	</s-layout>
</template>

<script setup>
	import { reactive,ref,onMounted,computed,nextTick } from 'vue';
	import sheep from '@/sheep';
	
	//数据定义
	const isLogin = computed(() => sheep.$store('user').isLogin);
	const template = computed(() => sheep.$store('app').template.user);
	// const checkColor = computed(() => '#e93323');
	const tabLeft = ref(0);
	let ProductNavindex = ref(0);
	let isWidth = ref(0);
	const navList = reactive([{val:'热门'},
					{val:'bbb'},
					{val:'ccc'},
					{val:'热门'},
					{val:'bbb'},
					{val:'ccc'},
					{val:'热门'},
					{val:'bbb'},
					{val:'ccc'},
					{val:'热门'},
					{val:'bbb'},
					{val:'ccc'},])
	const categoryList = reactive([])				
	const discoverList = reactive([])
	

	
	function ProductNavTab(item, index) {
		ProductNavindex.value = index;
		// this.itemStyle = this.navList[index].activeList.styleType;
		// this.goodsSort = item.activeList.goodsSort;

		nextTick(() => {
			const id = 'id' + index.value;
			tabLeft.value = (index.value - 2) * isWidth.value; // 设置下划线位置
			// 如果需要对id对应的元素进行直接操作，可以在这里进行
			// document.getElementById(id).style.left = `${tabLeft.value}px`;
		  });
		// this.limit = item.activeList.num;
		// this.changeTab(item, index);
	}
	const getStyle = (item) => {
	      return {
	        height: `${item * 100}rpx`,
	        border: '1rpx solid red'
	      };
	    };
	// 搜索
	function onSearch(keyword) {
	  if (!keyword) {
	    return;
	  }
	  console.log('搜索了',keyword)
	  // saveSearchHistory(keyword);
	  // 前往商品列表（带搜索条件）
	  // sheep.$router.go('/pages/goods/list', { keyword });
	}
	
	
	
	// 标签内容方法
	const list = ref([]);
	const total = ref(20); // 总数据量，用于模拟加载更多
	const pageSize = ref(10); // 每次加载的数据量
	const pageNum = ref(1); // 当前页码
	const loadingMore = ref(false); // 正在加载更多数据
	const noMoreData = ref(false); // 是否已无更多数据
	const triggered = ref(false); // 下拉刷新触发状态
	const swiperHeight = ref(0)
	
	const arr =  ref([3, 2, 5, 7, 3, 7, 5, 4, 5, 7]);
	
	
	// 初始化数据
	const init = async () => {
	  await loadMore(pageNum.value);
	};

	const handleScrollToLower = () => {
	console.log('触发了上拉加载');
	let newArr = [5, 3, 4, 7, 8, 2, 1, 5, 7, 6]
	    // this.setData({ arr: [...this.data.arr, ...newArr] })
		arr.value = [...arr.value,...newArr]
	    // this.setData({ arr: this.data.arr })
	    // loadItems(pageNum.value);
	};
	// 上拉加载更多
	const loadMore = async () => {
	  if (list.value.length >= total.value) {
	    noMoreData.value = true;
	    return;
	  }
	  loadingMore.value = true;
	  pageNum.value += 1;
	  // 模拟网络请求
	  setTimeout(() => {
	    const newData = Array.from({ length: pageSize.value }, (_, i) => `Item ${(pageNum.value - 1) * pageSize.value + i + 1}`);
	    list.value.push(...newData);
	    loadingMore.value = false;
	  }, 1000);
	};
	
	// 下拉刷新
	const onRefresh =  () => {
	  triggered.value = true;
	  setTimeout(() => {
	  pageNum.value = 1; // 重置页码
		init(); // 重新加载数据
		uni.stopPullDownRefresh();
	  triggered.value = false; // 关闭刷新动画
	  },1000)
	};
	
	
	onMounted(() => {
		uni.getSystemInfo({
			success(e) {
				isWidth.value = (e.windowWidth) / 5;
				swiperHeight.value = e.windowHeight - 167;
			}
		});
	  init();
	});
			

	
</script>

<style lang="scss" scoped>
	.search_box{
		width: 100%;
		background-color: white;
		.ss-flex{
			width: 90%;
			margin: 0 auto;
		}
	}
	.discover-box{
		width: 100%;
		background-color: lightpink;
		.scroll-view {
		  // height: 500px;
		  .scroll-item {
		    padding: 20rpx;
		    height: 200px;
		    border-bottom: 1px solid #eee;
		  }
			.masonry_item{
				
			}
		}
		
	}
	.loading-more, .no-more-data {
	  text-align: center;
	  padding: 40rpx;
	  font-size: 40rpx;
	  color: #999;
	}
.nav-bd {
	height: 70rpx;
	line-height: 70rpx;
	padding-left: 20rpx;
	background: #fff;

	.item {
		display: inline-block;
		font-size: 28rpx;
		color: #333;
		font-weight: 400;
		padding-right: 48rpx;

		&.on {
			border-radius: 0;
		}
	}
}
.longTab {
	.longItem {
		height: 70rpx;
		display: inline-block;
		line-height: 70rpx;
		text-align: center;
		font-size: 28rpx;
		color: #333333;
		white-space: nowrap;
		margin-right: 46rpx;

		&.click {
			font-weight: bold;
			font-size: 30rpx;
			position: relative;

			&::after {
				content: '';
				width: 40rpx;
				height: 4rpx;
				background: var(--color);
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
			}
		}
	}
}

</style>