增加社区种草
This commit is contained in:
parent
14062bc4ef
commit
be42d78eca
14
pages.json
14
pages.json
@ -191,6 +191,20 @@
|
||||
"enablePullDownRefresh": true,
|
||||
"navigationStyle": "default"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/community/community",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "社区",
|
||||
"enablePullDownRefresh": false
|
||||
},
|
||||
"meta": {
|
||||
"auth": false,
|
||||
"sync": true,
|
||||
"title": "社区",
|
||||
"group": "商城"
|
||||
}
|
||||
}
|
||||
],
|
||||
"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