uniapp 分類側邊欄和商品

2021-01-06

<template>
    <view class="container">
        <!-- 頂部面板 -->
        <view class="top--panel">
            <!-- 頂部面板，可添加所需要放在頁面頂部的內容代碼。比如banner圖 -->
            <view style="background-color: #ffaa00;text-align: center;font-size: 28rpx;padding: 10px 0;color: #fff;">
                <view>這裏頂部內容佔位區域，不需要則刪除</view>
                <view>可添加需放在頁面頂部的內容，比如banner圖</view>
            </view>
        </view>
        <!-- 滾動區域 -->
        <view class="scroll-panel" id="scroll-panel">
            <view class="list-box">
                <view class="left">
                    <scroll-view scroll-y="true" :style="{ height: scrollHeight + 'px' }" :scroll-into-view="leftIntoView">
                        <view
                            class="item"
                            v-for="(item, index) in leftArray"
                            :key="index"
                            :class="{ active: index == leftIndex }"
                            :id="'left-' + index"
                            :data-index="index"
                            @tap="leftTap"
                        >
                            {{ item }}
                        </view>
                    </scroll-view>
                </view>
                <view class="main">
                    <scroll-view scroll-y="true" :style="{ height: scrollHeight + 'px' }" @scroll="mainScroll" :scroll-into-view="scrollInto" scroll-with-animation="true">
                        <view class="item main-item" v-for="(item, index) in mainArray" :key="index" :id="'item-' + index">
                            <view class="title">
                                <view>{{ item.title }}</view>
                            </view>
                            <view class="goods" v-for="(item2, index2) in item.list" :key="index2">
                                <image src="/static/logo.png" mode=""></image>
                                <view>
                                    <view>第{{ index2 + 1 }}個商品標題</view>
                                    <view class="describe">第{{ index2 + 1 }}個商品的描述內容</view>
                                    <view class="money">第{{ index2 + 1 }}個商品的價格</view>
                                </view>
                            </view>
                        </view>
                        <view class="fill-last" :style="{ height: fillHeight + 'px' }"></view>
                    </scroll-view>
                </view>
            </view>
        </view>
        <!-- 底部面板 -->
        <view class="bottom-panel">
            <!-- 底部面板，可添加所需要放在頁面底部的內容代碼。比如購物車欄目 -->
            <view style="background-color: #ffaa00;text-align: center;font-size: 28rpx;padding: 10px 0;color: #fff;">
                <view>這裏底部內容佔位區域，不需要則刪除</view>
                <view>可添加需放在頁面底部的內容，比如購物車欄目</view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                scrollHeight: 400,
                scrollTopSize: 0,
                fillHeight: 0, // 填充高度，用於最後一項低於滾動區域時使用
                leftArray: [],
                mainArray: [],
                topArr: [],
                leftIndex: 0,
                scrollInto: ''
            };
        },
        computed: {
            /* 計算左側滾動位置定位 */
            leftIntoView() {
                return `left-${this.leftIndex > 3 ? this.leftIndex - 3 : 0}`;
            }
        },
        mounted() {
            /* 等待DOM掛載完成 */
            this.$nextTick(() => {
                /* 在非H5平臺，nextTick回調後有概率獲取到錯誤的元素高度，則添加200ms的延遲來減少BUG的產生 */
                setTimeout(() => {
                    /* 等待滾動區域初始化完成 */
                    this.initScrollView().then(() => {
                        /* 獲取列表數據，你的代碼從此處開始 */
                        this.getListData();
                    });
                }, 200);
            });
        },
        methods: {
            /* 初始化滾動區域 */
            initScrollView() {
                return new Promise((resolve, reject) => {
                    let view = uni.createSelectorQuery().select('#scroll-panel');
                    view.boundingClientRect(res => {
                        this.scrollTopSize = res.top;
                        this.scrollHeight = res.height;
                        this.$nextTick(() => {
                            resolve();
                        });
                    }).exec();
                });
            },
            /* 獲取列表數據 */
            getListData() {
                // Promise 爲 ES6 新增的API ，有疑問的請自行學習該方法的使用。
                new Promise((resolve, reject) => {
                    /* 因無真實數據，當前方法模擬數據。正式項目中將此處替換爲 數據請求即可 */
                    uni.showLoading();
                    setTimeout(() => {
                        let [left, main] = [[], []];

                        for (let i = 0; i < 25; i++) {
                            left.push(`${i + 1}類商品`);

                            let list = [];
                            let r = Math.floor(Math.random() * 10);
                            r = r < 1 ? 3 : r;
                            for (let j = 0; j < r; j++) {
                                list.push(j);
                            }
                            main.push({
                                title: `第${i + 1}類商品標題`,
                                list
                            });
                        }

                        // 將請求接口返回的數據傳遞給 Promise 對象的 then 函數。
                        resolve({ left, main });
                    }, 1000);
                }).then(res => {
                    console.log('-----------請求接口返回數據示例-------------');
                    console.log(res);

                    uni.hideLoading();
                    this.leftArray = res.left;
                    this.mainArray = res.main;

                    // DOM 掛載後 再調用 getElementTop 獲取高度的方法。
                    this.$nextTick(() => {
                        this.getElementTop();
                    });
                });
            },
            /* 獲取元素頂部信息 */
            getElementTop() {
                new Promise((resolve, reject) => {
                    let view = uni.createSelectorQuery().selectAll('.main-item');
                    view.boundingClientRect(data => {
                        resolve(data);
                    }).exec();
                }).then(res => {
                    let topArr = res.map(item => {
                        return item.top - this.scrollTopSize; /* 減去滾動容器距離頂部的距離 */
                    });
                    this.topArr = topArr;

                    /* 獲取最後一項的高度，設置填充高度。判斷和填充時做了 +-20 的操作，是爲了滾動時更好的定位 */
                    let last = res[res.length - 1].height;
                    if (last - 20 < this.scrollHeight) {
                        this.fillHeight = this.scrollHeight - last + 20;
                    }
                });
            },
            /* 主區域滾動監聽 */
            mainScroll(e) {
                let top = e.detail.scrollTop;
                let index = 0;
                /* 查找當前滾動距離 */
                for (let i = this.topArr.length - 1; i >= 0; i--) {
                    /* 在部分安卓設備上，因手機邏輯分辨率與rpx單位計算不是整數，滾動距離與有誤差，增加2px來完善該問題 */
                    if (top + 2 >= this.topArr[i]) {
                        index = i;
                        break;
                    }
                }
                this.leftIndex = index < 0 ? 0 : index;
            },
            /* 左側導航點擊 */
            leftTap(e) {
                let index = e.currentTarget.dataset.index;
                this.scrollInto = `item-${index}`;
            }
        }
    };
</script>

<style lang="scss">
    page,
    .container {
        height: 100%;
    }
    /* 容器 */
    .container {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: flex-start;
        align-content: flex-start;

        & > view {
            width: 100%;
        }

        .scroll-panel {
            flex-grow: 1;
            height: 0;
            overflow: hidden;
        }

        .bottom-panel {
            padding-bottom: 0;
            padding-bottom: constant(safe-area-inset-bottom);
            padding-bottom: env(safe-area-inset-bottom);
        }
    }

    .list-box {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: flex-start;
        align-content: flex-start;
        font-size: 28rpx;

        .left {
            width: 200rpx;
            background-color: #f6f6f6;
            line-height: 80rpx;
            box-sizing: border-box;
            font-size: 32rpx;

            .item {
                padding-left: 20rpx;
                position: relative;
                &:not(:first-child) {
                    margin-top: 1px;

                    &::after {
                        content: '';
                        display: block;
                        height: 0;
                        border-top: #d6d6d6 solid 1px;
                        width: 620upx;
                        position: absolute;
                        top: -1px;
                        right: 0;
                        transform: scaleY(0.5); /* 1px像素 */
                    }
                }

                &.active {
                    color: #42b983;
                    background-color: #fff;
                }
            }

            .fill-last {
                height: 0;
                width: 100%;
                background: none;
            }
        }
        .main {
            background-color: #fff;
            padding-left: 20rpx;
            width: 0;
            flex-grow: 1;
            box-sizing: border-box;

            .title {
                line-height: 64rpx;
                font-size: 24rpx;
                font-weight: bold;
                color: #666;
                background-color: #fff;
                position: sticky;
                top: 0;
                z-index: 19;
            }

            .item {
                padding-bottom: 10rpx;
                border-bottom: #eee solid 1px;
            }

            .goods {
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                justify-content: flex-start;
                align-items: center;
                align-content: center;
                margin-bottom: 10rpx;

                & > image {
                    width: 120rpx;
                    height: 120rpx;
                    margin-right: 16rpx;
                    margin-left: 2px;
                }

                .describe {
                    font-size: 24rpx;
                    color: #999;
                }

                .money {
                    font-size: 24rpx;
                    color: #efba21;
                }
            }
        }
    }
</style>