增加社区种草
This commit is contained in:
parent
14062bc4ef
commit
be42d78eca
14
pages.json
14
pages.json
@ -191,6 +191,20 @@
|
|||||||
"enablePullDownRefresh": true,
|
"enablePullDownRefresh": true,
|
||||||
"navigationStyle": "default"
|
"navigationStyle": "default"
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path" : "pages/community/community",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationBarTitleText": "社区",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
},
|
||||||
|
"meta": {
|
||||||
|
"auth": false,
|
||||||
|
"sync": true,
|
||||||
|
"title": "社区",
|
||||||
|
"group": "商城"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"subPackages": [{
|
"subPackages": [{
|
||||||
|
|||||||
263
pages/community/community.vue
Normal file
263
pages/community/community.vue
Normal file
@ -0,0 +1,263 @@
|
|||||||
|
<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>
|
||||||
Loading…
x
Reference in New Issue
Block a user