微信小程序实训之商品的搭建

用户9184480

发布于 2024-12-13 19:27:45

9600

代码可运行

文章被收录于专栏：云计算linux云计算linux

运行总次数：0

代码可运行

7.商品的搭建

7.1 设计推荐和更多

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

样式设置

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

7.2 设计内容

<!-- 文件显示,也可以是其他格式 -->
<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">{{item.title}}</view>
                <view class="sell">销量:{{item.sell}}</view>
            </view>
            <view class="row">
                <view class="sale">{{item.sale}}</view>
                <view class="money">销量:{{item.money}}</view>
            </view>
            <view class="evaluation">{{item.evaluation}}人评价</view>
            <view class="abstract">{{item.abstract}}</view>
        </view>
    </view>
</view>

7.3 样式设置

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

.lists{
    box-sizing: border-box;
  }
  .list{
     padding: 30rpx 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:36rpx;
    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:36rpx;
    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:30rpx;
    font-size: 10px;
    color:#808080;
     display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

7.4 数据来源

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

下拉拖动的函数：

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

最后效果：