小程序实训之商品的搭建

小程序实训之商品的搭建

7.商品的搭建

7.1 设计推荐和更多

代码语言：javascript代码运行次数：0运行复制

<!-- 推荐和更多 -->
<view class="home-title">
    <text style="font-weight:bolder;color:#000;padding:10rpx">推荐</text>
    <text style="font-size: 16px;padding: 10rpx;">更多</text>
</view>

样式设置

代码语言：javascript代码运行次数：0运行复制

.home-title{
    margin-top: 20rpx;
    padding-bottom: 20rpx;
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    box-sizing: border-box;
}

7.2 设计内容

代码语言：javascript代码运行次数：0运行复制

<!-- 文件显示,也可以是其他格式 -->
<view class="lists">
<!-- bindtap绑定事件 -->
    <view class="list" bindtap="toDetail" wx:for="{{items}}" wx:for-index='index'
    wx:for-item='item' data-obj='{{item}}'>
        <image class="list-left" src='{{item.imgUrl}}'></image>
        <view class="list-right">
            <view class="row">
                <view class="right-text">{{}}</view>
                <view class="sell">销量:{{item.sell}}</view>
            </view>
            <view class="row">
                <view class="sale">{{item.sale}}</view>
                <view class="money">销量:{{}}</view>
            </view>
            <view class="evaluation">{{}}人评价</view>
            <view class="abstract">{{item.abstract}}</view>
        </view>
    </view>
</view>

7. 样式设置

直接C V即可，掌握样式后可以微调。

代码语言：javascript代码运行次数：0运行复制

.lists{
    box-sizing: border-box;
  }
  .list{
     padding: 0rpx 10rpx;
     background: #FFF;
     box-sizing: border-box;
     display: flex;
     flex-direction: row;
  }
  .row{
     background: #FFF;
     display: flex;
     flex-direction: row;
  }
  .list-left{
    width:28%;
    height:120px
  }
  .list-right{
    width:70%;
    height:100%;
    padding-left:6rpx;
    display: flex;
    flex-direction: column;
  }
  .right-text{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    font-weight:bold;
    width: 100px;
  }
  .money{
    text-decoration:line-through;
    font-size:10px;
    padding-left:6rpx;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    color:#808080;
  }
  .sale{
    color:#e91e56;
    font-weight:bold;
    font-size:20px;
  }
  .sell{
    width:40%;
    margin-right: 0px;
    padding-right: 0px;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    font-size: 10px;
    color:#808080;
  }
  .evaluation{
    font-size: 10px;
    color:#808080;
  }
  .abstract{
     padding-top:0rpx;
    font-size: 10px;
    color:#808080;
     display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

7.4 数据来源

代码语言：javascript代码运行次数：0运行复制

**
     * 页面的初始数据
     */
    data: {
        items:[
            {
                id:0,
                title:'红裙子',
                money:'￥200',
                imgUrl:'../img/shop1.jpg',
                sale:'￥178',
                evaluation:'222',
                sell:'',
                abstract:'红裙子，物美价廉'
            },
            {
                id:1,
                title:'白衣服',
                money:'￥200',
                imgUrl:'../img/shop.jpg',
                sale:'288',
                evaluation:'12',
                sell:'2',
                abstract:'白T恤'
            }
        ]
    }

下拉拖动的函数：

代码语言：javascript代码运行次数：0运行复制

/**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
        let that=this;
        let arr=[
            {
                id:0,
                title:'红裙子',
                money:'￥200',
                imgUrl:'../img/shop1.jpg',
                sale:'￥178',
                sell:'',
                abstract:'红裙子，物美价廉'
            },
            {
                id:1,
                title:'白衣服',
                money:'￥200',
                imgUrl:'../img/shop.jpg',
                sale:'288',
                sell:'2',
                abstract:'白T恤'
            }
        ];
        that.setData({
            items:that.data.(arr)
        })
    }

最后效果：

本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。 原始发表：2024-02-10，如有侵权请联系 cloudcommunity@tencent 删除前往查看数据小程序view设计事件