小程序商城主页左右展示（模拟淘宝商品排布）

爱被打了一巴掌 2022-08-30 04:21 234阅读 0赞

# 商城主页左右排布 #

实现左右两个商品，模仿淘宝商品效果，可点击跳转到详情页

--------------------

# 效果 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0REREhMXw_size_16_color_FFFFFF_t_70]

--------------------

# 一、主要用到的属性 #

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>必填</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>mode</td> 
   <td>string</td> 
   <td>scaleToFill</td> 
   <td>否</td> 
   <td>缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素</td> 
  </tr> 
  <tr> 
   <td>float:left</td> 
   <td>null</td> 
   <td>null</td> 
   <td>否</td> 
   <td>浮动向左</td> 
  </tr> 
 </tbody> 
</table>

# 二、代码 #

index.wxml：

<view class="goodsshow">
        <view class="right">
          <image src="cloud://cloud1-8ggdb01rcc7374fd.636c-cloud1-8ggdb01rcc7374fd-1306175913/风景/4栋宿舍楼.jpg" mode="aspectFill" class="img_size"  bindtap="jump"></image>
          <text>4栋宿舍楼</text>
        </view>
        <view class="right">
          <image src="cloud://cloud1-8ggdb01rcc7374fd.636c-cloud1-8ggdb01rcc7374fd-1306175913/风景/夜景.jpg" mode="aspectFill" class="img_size" bindtap="jump"></image>
          <text>14栋夜景</text>
        </view>
        <view class="right">
          <image src="cloud://cloud1-8ggdb01rcc7374fd.636c-cloud1-8ggdb01rcc7374fd-1306175913/风景/格物2教学楼.jpg" mode="aspectFill" class="img_size"  bindtap="jump" ></image>
          <text>格物2教学楼</text>
        </view>
        <view class="right">
          <image src="cloud://cloud1-8ggdb01rcc7374fd.636c-cloud1-8ggdb01rcc7374fd-1306175913/风景/航拍新华学院.jpg" mode="aspectFill" class="img_size"  bindtap="jump" ></image>
          <text>航拍新华学院</text>
        </view>
        <view class="right">
          <image src="cloud://cloud1-8ggdb01rcc7374fd.636c-cloud1-8ggdb01rcc7374fd-1306175913/商品/AirPods 2.jpg" mode="aspectFill" class="img_size" bindtap="jump" ></image>
          <text>AirPods 2</text>
        </view>
        <view class="right">
          <image src="cloud://cloud1-8ggdb01rcc7374fd.636c-cloud1-8ggdb01rcc7374fd-1306175913/商品/DBH大鱼板.jpg" mode="aspectFill" class="img_size"  bindtap="jump"  ></image>
          <text>DBH大鱼板</text>
        </view>
    </view>

index.wxss

/**商品展示**/
    .goodsshow{ 
      margin-top: 0px;
      background-color: rgb(243, 243, 243);
      height: 400px;
    }
    
    .right{  
      margin-top: 10px;
      float: left; /* 浮动向左 */ 
      width: 50%; /* 设置宽度*/ 
      height: 230px;  
      text-align: center; /* 设置图片下方的提示文字居中显示 */
    }
    
    /**图片自适应**/
    .img_size{ 
      width: 200px;
      height: 200px;
    }

index.js：  
这里的jump需要自行设置跳转路径

Page({ 
      /**跳转**/
      jump:function(){ 
        wx.switchTab({ 
          url: '../show/show',
        })
      }          
    })

--------------------

# 总结 #

本文仅仅简单实现了商品左右排布效果。

## 新的改变 ##

最近做了一个展示类的小程序，大家如果感兴趣可以关注一下，我会更新这个小程序所有功能，包括前端。小程序的名字叫淘湖，第一次做小程序，查询了不少例子才完成的，希望大家多多包涵O(∩\_∩)O~。

**文章未经同意不能转载！！！**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0REREhMXw_size_16_color_FFFFFF_t_70]: /images/20220829/a964c2e8111645839c813ce6b04ace11.png