案例：商城内容展示

效果图

代码

wxml代码

<!-- index.wxml -->
<!-- 商城首页 -->
<swiper indicator-dots="true" autoplay="true" interval="2000">
  <block wx:for="{{imgUrls}}" wx:key='imgs'>
  <swiper-item>
    <image src='{{item}}' mode="widthFix"></image>
  </swiper-item>
  </block>
</swiper>
<!-- 分类推荐 -->
<view class="category">
  <block wx:for="{{category}}" wx:key="types">
  <view class="category-item">
    <image src='{{item.url}}' class='category-img'></image>
    <text>{{item.tag}}</text>
    </view>
  </block>
</view>
<!-- 今日特价 -->
<view class="separate"></view>
<view class="discount">
<view class="tag">
  <view class="tag-insider"></view>
  <view>今日特价</view></view>
  <view>更多>></view>
</view>

CSS代码

/* index.wxss */
.category{
  display: flex;
  justify-content: space-around
}
.category-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx;

}
.category-img{
  background-color: #C5C1C0;
  width: 100rpx;
  height: 100rpx;
  border-radius: 30%;
}
.category-item text{
  padding-top: 10rpx;
  font-size: 25rpx;
}
.separate{
  height: 10rpx;
  background-color: #F3F3F3;

}
.discount{
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  font-size: 30rpx;
}
.tag{
  display: flex;
  color: red;
}
.tag-insider{
  margin-right: 10rpx;
  margin-top: 5rpx;
  width: 10rpx;
  height: 30rpx;
  background-color:#fea96a;
}

js文件

// index.js
const app = getApp()

Page({
  data: {
    imgUrls:[
      "https://img.youpin.mi-img.com/youpinoper/1002265792a851c83054da07959d976c.jpg?id=&w=1080&h=450",
      "https://img.youpin.mi-img.com/youpinoper/f62e9e59b21f97f81ed3ab567f0e4b08.jpg?id=&w=1080&h=450",
      "https://img.youpin.mi-img.com/youpinoper/0bb6ad5d5c85b03534b460c297c6b85a.jpeg?id=&w=1080&h=450"
    ],

    category:[
      { url:"https://img.youpin.mi-img.com/shopmain/b68323e900ffbb4835dd9e6a15d10b77.png?w=800&h=800",
      tag:'小米众筹'},
            {
              url: "https://img.youpin.mi-img.com/800_pic/27a789a428038214a8dda98f97d5fe4c.png",
        tag: '限时抢购'
      },
            {
              url: "https://img.youpin.mi-img.com/800_pic/c13ae49b289b269d9a39496e3e31708d.png",
        tag: '热销榜单'
      },
            {
              url: "https://img.youpin.mi-img.com/800_pic/da003d715c9e832b2c8e62402e48bfa0.png",
        tag: '随便逛逛'
      }
    ]
  },

})