264 lines
6.4 KiB
Vue
264 lines
6.4 KiB
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>
|