微信小程序案例：商城首页（数据绑定版）

效果图

要求

把轮播图地址和按钮图片地址用数据绑定的方式做出来，

实现数据和wxml代码的分离。

部分代码

数据

// index.js


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: '随便逛逛'
      }
    ]
  },

})

轮播图

WXML:

<swiper class="content-info-slide" indicator-dots="true" autoplay="true" interval="2000">
  <swiper-item>
    <image src='{{imgUrls[0]}}'
      mode="widthFix"></image>
   </swiper-item>
   <swiper-item>
    <image src='{{imgUrls[1]}}'
      mode="widthFix"></image>
   </swiper-item>
   <swiper-item>
    <image src='{{imgUrls[2]}}'
      mode="widthFix"></image>
   </swiper-item>

</swiper>     

WXSS:

.content-info-slide image{
  width:100%;
}

分类按钮

1. 编写WXML

这里采用数据绑定的方式：

<view class="category">
  <view class="category-item">
    <image class='category-img' src='{{category[0].url}}' ></image>
    <text>{{category[0].tag}}</text>
  </view>
  <view class="category-item">
    <image class='category-img' src='{{category[1].url}}' ></image>
    <text>{{category[1].tag}}</text>
  </view>
  <view class="category-item">
    <image class='category-img' src='{{category[2].url}}' ></image>
    <text>{{category[2].tag}}</text>
  </view>
  <view class="category-item">
    <image class='category-img' src='{{category[3].url}}' ></image>
    <text>{{category[3].tag}}</text>
  </view>
 
</view>

2.编写按钮的wxss

/* pages/store/index.wxss */

.category-item{


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

3.编写父盒子的wxss

/* pages/store/index.wxss */
.category{
    display: flex;
    justify-content: space-around
  }