uni-app渲染商品列表-阿里云开发者社区

uni-app渲染商品列表

2023-11-17 31

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： uni-app渲染商品列表

<template>
    <view class="page">
        <view class="uni-product-list">
            <view class="uni-product" v-for="(item,index) in productList" :key="index">
                <view class="image-view">
                    <image v-if="renderImage" class="uni-product-image" :src="item.image"></image>
                </view>
                <view class="uni-product-title">{{item.title}}</view>
                <view class="uni-product-price">
                    <text class="uni-product-price-favour">￥{{item.originalPrice}}</text>
                    <text class="uni-product-price-original">￥{{item.favourPrice}}</text>
                    <text class="uni-product-tip">{{item.tip}}</text>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                productList: [],
                renderImage: false
            };
        },
        methods: {
            getList() {
                uni.request({
                    url: 'http://localhost:3000/goods',
                    success: (res) => {
                        console.log(res.data);
                        this.productList = res.data.goodslist;
                    }
                });
            }
        },
        onLoad() {
            this.getList();
            this.renderImage = true;
        },
    };
</script>
<style>
</style>

good.js

let data = {
            "goodslist":[
                {
                    image: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/example/product1.jpg',
                    title: 'Apple iPhone X 256GB 深空灰色 移动联通电信4G手机',
                    originalPrice: 9999,
                    favourPrice: 8888,
                    tip: '自营'
                },
                {
                    image: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/example/product2.jpg',
                    title: 'Apple iPad 平板电脑 2018年新款9.7英寸',
                    originalPrice: 3499,
                    favourPrice: 3399,
                    tip: '优惠'
                },
                {
                    image: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/example/product3.jpg',
                    title: 'Apple MacBook Pro 13.3英寸笔记本电脑（2017款Core i5处理器/8GB内存/256GB硬盘 MupxT2CH/A）',
                    originalPrice: 12999,
                    favourPrice: 10688,
                    tip: '秒杀'
                },
                {
                    image: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/example/product4.jpg',
                    title: 'Kindle Paperwhite电纸书阅读器 电子书墨水屏 6英寸wifi 黑色',
                    originalPrice: 999,
                    favourPrice: 958,
                    tip: '秒杀'
                },
                {
                    image: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/example/product5.jpg',
                    title: '微软（Microsoft）新Surface Pro 二合一平板电脑笔记本 12.3英寸（i5 8G内存 256G存储）',
                    originalPrice: 8888,
                    favourPrice: 8288,
                    tip: '优惠'
                },
                {
                    image: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/example/product6.jpg',
                    title: 'Apple Watch Series 3智能手表（GPS款 42毫米 深空灰色铝金属表壳 黑色运动型表带 MQL12CH/A）',
                    originalPrice: 2899,
                    favourPrice: 2799,
                    tip: '自营'
                }
            ],
}
module.exports = {
  data: data
}

运行模拟接口数据如下

渲染效果：

uni-app渲染商品列表

热门文章

最新文章

相关课程

相关电子书

相关实验场景