微信小程序淘宝首页双排图片布局排版代码

小程序淘宝首页双排图片布局排版代码

效果图：
使用技术主要是flex布局,绝对定位布局,小程序前端页面开发,以及一些样式!

直接贴代码,都有详细注释,熟悉一下,方便以后小程序开发!

wxml:

 <view class="taobaolist">
  <block wx:for="{
  {imagelist}}" wx:key="item">
    <view class="taobao-list">
        <view class="taobao-list-info" index="{
  {index}}">
          <image class="taobao-list-photo" src="{
  {item.imageUrl}}"/>
          <text class="taobao-list-desc">{
  {item.content}}</text>
        </view>
    </view>
  </block>
</view>

js:

imagelist:[{
      imageUrl:'/image/img1.webp',
      content:'包邮 韩式创意玻璃水杯架 沥水杯架茶杯架 倒挂架酒杯架沥水盘',
    },{