uniapp 日常业务随便写写源码

luckycoke
已于 2024-08-15 16:29:20 修改
阅读量380
点赞数 2
文章标签： uni-app 前端 javascript
于 2024-08-15 11:20:38 首次发布
本文链接：https://blog.csdn.net/qq_44759522/article/details/141217752
版权
现成的组件直接用
<template>
    <view style="margin: 10rpx;">
        <view class="tea-header">
            <text class="tea-title">礼尚往来</text>
            <view class="tea-view-all">
                <text>查看全部</text>
                <text>></text>
            </view>
        </view>

        <view style="display: flex;justify-content: center;align-content: center;">
            <NavBar :navItems="myNavItems" :text_padding="12" :fontSize="30" :dynamicHeight="8" :indicatorWidth="64"
                @item-selected="onItemSelected" />
        </view>

        
        <view class="content-wrapper" style="position: relative; overflow: hidden;">
            <view v-for="(vla, i) in products" :key="i" 
                  :class="['content-page', getPageClass(i)]">
                <!-- 左边轮播图 -->
                <view class="left-container">
                    <swiper class="swiper-container" indicator-dots="true" indicator-active-color="#ffffff"
                        indicator-color="#fff9" autoplay="true" interval="3000" circular="true">
                        <swiper-item v-for="(item, index) in vla.bannerImages" :key="index">
                            <image class="swiper-image" mode="aspectFill" :src="item.src" />
                        </swiper-item>
                    </swiper>
                </view>

                <!-- 右边商品网格 -->
                <view class="right-container">
                    <view class="product-item" v-for="(item, index) in vla.list" :key="index">
                        <image class="product-image" :src="item.image" mode="aspectFill" />
                        <view style="display: flex;align-items: flex-start; flex-direction: column; ">
                            <text class="product-title" style="">{{ item.title }}</text>
                            <text class="product-price">{{ item.price }}</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>


    </view>
</template>

<script>
import NavBar from './components/xztdemoNavBar.vue'

export default {
    components: {
        NavBar
    },
    data() {
        return {
            myNavItems: ['关怀领导', '探望长辈', '关爱女性', '男性健康', '关爱儿童',],
            selectedIndex: 0,
            products: [
                {
                    bannerImages: [
                        {
                            src: 'http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',
                        },
                        {

                            src: 'http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',

                        },
                        {
                            src: 'http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960'
                        }
                    ],
                    list: [{
                        image: 'http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',
                        title: '人参灵芝胶囊',
                        price: '¥798.00'
                    },
                    {
                        image: 'http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',
                        title: 'KMax康麦斯',
                        price: '¥698.00'
                    },
                    {
                        image: 'http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',
                        title: '海参礼盒',
                        price: '¥1798.00'
                    },
                    {
                        image: 'http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',
                        title: '虫草',
                        price: '¥798.00'
                    },
                    ]
                },
                {
                    bannerImages: [
                        {
                            src: 'http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',
                        },
                        {

                            src: 'http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',

                        },
                        {
                            src: 'http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960'
                        }
                    ],
                    list: [{
                        image: 'http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',
                        title: '人参灵芝胶囊1232123',
                        price: '¥798.00'
                    },
                    {
                        image: 'http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',
                        title: 'KMax康麦斯3333',
                        price: '¥698.00'
                    },
                    {
                        image: 'http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',
                        title: '海参礼盒12132',
                        price: '¥1798.00'
                    },
                    {
                        image: 'http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',
                        title: '虫草123',
                        price: '¥798.00'
                    },
                    ]
                },

            ]
        }
    },
    methods: {
        onItemSelected(index) {
            this.selectedIndex = index;
        },
        getPageClass(index) {
            if (index === this.selectedIndex) {
                return 'active';
            } else if (index < this.selectedIndex) {
                return 'left';
            } else {
                return 'right';
            }
        }
    }
}
</script>

<style>
.tea-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15rpx 20rpx;
}

.tea-title {
    font-size: 32rpx;
    font-weight: bold;
    font-family: PingFang SC, PingFang SC;
}

.tea-view-all {
    color: #6E6E6E;
    font-size: 24rpx;
}

.content-wrapper {
    height: 300px; /* 根据需要调整高度 */
}

.content-page {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateX(100%);
    display: flex;
}

.content-page.active {
    opacity: 1;
    transform: translateX(0);
}

.content-page.left {
    transform: translateX(-100%);
}

.content-page.right {
    transform: translateX(100%);
}

.left-container {
    flex: 1;
    height: 100%;
    margin-right: 10px;
}

.swiper-container {
    width: 100%;
    height: 100%;
}

.swiper-image {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    transform: scaleX(-1);
    object-fit: cover;
}


.right-container {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
}

.product-item {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: 10px;
    /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
}

.product-image {
    width: 100%;
    height: 100px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 5px;
}

.product-title {
    font-size: 14px;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 6em;
    /* 估算一个宽度，大约5个字 */
}

.product-price {
    font-size: 16px;
    color: #FF6A22;
}
</style>