charles/frontend-app
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

feat: 修改瀑布流

Browse Source
This commit is contained in:
charles
2025-11-10 23:34:16 +08:00
parent 1158231bce
commit f1d4634240
4 changed files with 239 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/supply_chain/supply_chain.vue
+130 -81
View File
@@ -26,9 +26,16 @@
</view>
<view class="setting-view">
<view class="name-box">
<mescroll-uni ref="mescrollRef" @down="downCallback" @up="upCallback" :up="upOption"
:down="downOption" @init="mescrollInit" :fixed="false">
<view class="mescrollUniView">
<mescroll-uni
ref="mescrollRef"
@down="downCallback"
@up="upCallback"
:up="upOption"
:down="downOption"
@init="mescrollInit"
:fixed="false"
>
<!-- <view class="mescrollUniView">
<PingItem
@ok="onJumpShop"
@@ -37,8 +44,29 @@
v-for="(item, index) in dataList"
:key="index"
></PingItem>
</view>
</mescroll-uni>
</view> -->
<!-- 原来单个 v-for 替换成两列 -->
<view class="mescrollUniView">
<view class="fall-col">
<PingItem
v-for="(item, i) in leftList"
:key="item.id"
:obj="item"
@ok="onJumpShop"
style="margin-top: 24rpx"
/>
</view>
<view class="fall-col">
<PingItem
v-for="(item, i) in rightList"
:key="item.id"
:obj="item"
@ok="onJumpShop"
style="margin-top: 24rpx"
/>
</view>
</view>
</mescroll-uni>
</view>
</view>
<!-- #ifndef H5 -->
@@ -49,6 +77,7 @@
</template>
<script>
import { toRaw } from "vue";
import { getCascadeCategory } from "@/api/common.js";
import Header from "@/components/common/header.vue";
import TopSafe from "@/components/common/top-safe.nvue";
@@ -57,91 +86,91 @@ import PingItem from "@/components/shop/ping-item.vue";
import { searchList } from "@/api/product.js";
import CustomTabBar from "@/components/custom-tab-bar.vue";
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
import MescrollUni from '@/components/mescroll-uni/mescroll-uni.vue';
import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue";
export default {
mixins: [MescrollMixin],
components: { Header, TopSafe, MyBtn, PingItem,CustomTabBar,MescrollUni },
mixins: [MescrollMixin],
components: { Header, TopSafe, MyBtn, PingItem, CustomTabBar, MescrollUni },
data() {
return {
dataList: [],
tabList: [{name:'推荐'}],
tabList: [{ name: "推荐" }],
curTab: 0,
upOption: {
auto: false,
page: {
size: 10 // 每页数据的数量,默认10
},
noMoreSize: 10, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
empty: {
tip: `空空如也`
},
textColor: '#333',
bgColor: 'rgba(0,0,0,0)',
},
downOption: {
auto: false,
textColor: '#333',
bgColor: 'rgba(0,0,0,0)',
},
upOption: {
auto: false,
page: {
size: 10, // 每页数据的数量,默认10
},
noMoreSize: 10, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
empty: {
tip: `空空如也`,
},
textColor: "#333",
bgColor: "rgba(0,0,0,0)",
},
downOption: {
auto: false,
textColor: "#333",
bgColor: "rgba(0,0,0,0)",
},
leftList: [],
rightList: [],
};
},
onLoad() {
this.init();
},
methods: {
mescrollInit(mescroll) {
this.mescroll = mescroll;
},
upCallback(page) {
let pageNum = page.num;
let pageSize = page.size;
let params = {
type: 2,
page: page.num,
pageSize: page.size,
isPar: true,
};
if(this.curTab != 0){
params['categoryId'] = this.tabList[this.curTab].id;
}
searchList(params).then(res => {
let curPageLen = res.data.length;
if (page.num === 1) this.dataList = [];
this.dataList = this.dataList.concat(res.data);
this.mescroll.endBySize(curPageLen, res.data.total);
})
// this.mescroll.endBySize(1, 1);
},
downCallback() {
this.$nextTick(function() {
this.mescroll && this.mescroll.resetUpScroll();
})
},
mescrollInit(mescroll) {
this.mescroll = mescroll;
},
upCallback(page) {
let pageNum = page.num;
let pageSize = page.size;
let params = {
type: 2,
page: page.num,
pageSize: page.size,
isPar: true,
};
if (this.curTab != 0) {
params["categoryId"] = this.tabList[this.curTab].id;
}
searchList(params).then((res) => {
let curPageLen = res.data.length;
if (page.num === 1) this.dataList = [];
this.dataList = this.dataList.concat(res.data);
console.log(this.dataList);
this.waterfall();
this.mescroll.endBySize(curPageLen, res.data.total);
});
},
downCallback() {
this.$nextTick(function () {
this.mescroll && this.mescroll.resetUpScroll();
});
},
async cascadeCategory() {
getCascadeCategory({ parentId: 0 }).then((res) => {
if (res && res.bizcode === 100) {
res.data.forEach(item=>{
this.tabList.push(item);
})
res.data.forEach((item) => {
this.tabList.push(item);
});
this.downCallback();
}
});
},
onTab(index) {
if (index != this.curTab) {
this.curTab = index;
this.dataList = [];
this.downCallback();
this.curTab = index;
this.dataList = [];
this.downCallback();
}
},
init() {
this.cascadeCategory();
this.cascadeCategory();
},
async getSearchList() {
const params = {
@@ -150,14 +179,31 @@ export default {
pageSize: 10,
isPar: true,
};
if(this.curTab != 0){
params['categoryId'] = this.tabList[this.curTab].id;
}
if (this.curTab != 0) {
params["categoryId"] = this.tabList[this.curTab].id;
}
const resp = await searchList(params);
if (resp && resp.bizcode === 100) {
this.dataList = resp.data || [];
this.waterfall();
}
},
waterfall() {
this.leftList = this.dataList
.map((item, index) => {
if (index % 2 == 0) return item;
return null;
})
.filter(Boolean);
this.rightList = this.dataList
.map((item, index) => {
if (index % 2 != 0)return item;
return null;
})
.filter(Boolean);
console.log(this.leftList, this.rightList);
},
onJumpSearch() {
uni.navigateTo({
url: "/pages/rwa_package/dongjian/search",
@@ -178,11 +224,9 @@ export default {
</script>
<style lang="scss" scoped>
.content-two {
height: calc(100vh );
height: calc(100vh);
background-color: $app-bj;
}
.head-view {
@@ -227,13 +271,13 @@ export default {
}
.line {
width: 48rpx;
height:6rpx;
height: 6rpx;
background-color: #7a35f6;
}
}
.setting-view {
width: 100%;
height: calc(100vh - 88rpx - 80rpx - 100rpx - var(--status-bar-height));
height: calc(100vh - 88rpx - 80rpx - 100rpx - var(--status-bar-height));
display: flex;
flex-direction: column;
@@ -249,12 +293,17 @@ export default {
flex-direction: column;
align-items: center;
.mescrollUniView{
width: calc(100vw - 48rpx);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.mescrollUniView {
width: calc(100vw - 48rpx);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.fall-col {
width: 332rpx; /* 与 PingItem 宽度一致 */
height: 100%;
}
}
}
}
</style>