小程序（4 编写home静态页面 swiper组件、产品item）

目标：

导航栏样式及文字更改

这里写图片描述

添加 swiper 组件
添加产品item组件

完成效果

这里写图片描述

导航栏样式及文字更改

在小程序中有两处配置导航栏的文件，分别是app.json 和 pages/xx/xx.json

两者都是用来设置页面的状态栏，导航栏，标题，窗口背景色，区别是前者是对全局进行配置，后者只是针对当前的页面进行配置。

这里写图片描述

在 pages/xx/xx.json 中多了一个 disableScroll 属性，用来配置当前页面是否可以上下滚动，默认为 false。
app.json 中配置导航栏的属性为 window, 页面中的 .json 只能设置 window相关的配置项，所以无需写 window这个键。
页面中配置项会覆盖app.jon 中的 window中相同的配置项。

现在我们分别为 home, cart,discounts,my 配置.json 文件。

home.json

{
  "navigationBarBackgroundColor": "#405f80",
  "navigationBarTitleText": "首页"
}

cart.json discounts.json my.json 同上配置

添加 `swiper` 组件

静态页面再.wxml文件中编写；

打开pages/home/home.wxml文件，编写页面；

微信小程序的页面标签语法和 html 语法相似，但小程序自己封装了一些组件，分为 试图容器、基础内容、表单组件、导航、媒体组件、地图、画布、开放功能、客服回话。具体使用时再查看要使用到的组件。

* `swiper` 组件*

swiper 组件属于视图容器中的滑块组件；使用方法参考开着文档/swiper

因为涉及到数据绑定，先用开发者文档中的实例；下一节详细说数据绑定这一块；

pages/home/home.wxml

<swiper indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image src="{{item}}" class="slide-image" width="355" height="150"/>
    </swiper-item>
  </block>
</swiper>

pages/home/home.js

Page({
  data: {
    imgUrls: [
      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
    ],
    indicatorDots: false,
    autoplay: false
  }
})

效果：

这里写图片描述

这里的 swiper 的宽度并不能占满页面，需要修改 home.wxss

 swiper{
    width:100%;
    height:400rpx
 }
 swiper image{
    width:100%;
    height:400rpx
 }

这里用到了 rpx，它是小程序特有的单位

添加产品 item 组件

先看产品 item完成的效果：

这里写图片描述

这里需要用到小程序的以下几个组件，列出了对应的 html 标签：

view 同 div
text 同 span
image 同 img

home.wxml

<view class='goods'>
  <view class="goods-item">
        <image src="http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg" />
        <view class="goods-desc">
            <view class="goods-name">是滴是滴所多所多所多所多所多所多所多所</view>
            <view>
                <text class="momey-tag">￥</text>
                <text class="price">34</text>
                <text style="text-decoration: line-through" class="original-price">￥2222</text>
            </view>
            <view class="had-sale">
                已售<text></text>
                <text>34</text>
            </view>
            <view>
                <span class="to-purchase">立即抢购</span>
            </view>
        </view>
  </view>
</view>

home.wxss

.goods{
    margin-top: 20rpx;
    display: flex;
    flex-direction:column;
    align-items: center;
}
.goods-item{
    display: flex;
    width: 90%;
    height: 220rpx;
    border:1px solid #ccc;
    margin-top: 20rpx;
    padding: 5px;
}

.goods-item image{
    width: 30%;
    height: 100%;
    margin-right: 10px;
}
.goods-desc{
    width: 60%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.goods-item .goods-name{
    height: 76rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.goods-item .goods-name,.goods-item .price,.goods-item .to-purchase{
    font-size: 14px;
}
.original-price{
    margin-left: 10px;
}
.momey-tag,.original-price,.had-sale{
    font-size: 12px;
}
.original-price,.had-sale{
    color: #cccccc;
}
.momey-tag,.price{
    color: red;
}
.to-purchase{
    background-color: red;
    padding: 3px 6px;
    border-radius: 5px;
    color: #fff;
}

效果：

这里写图片描述

静态的 home 页面大功告成，里面涉及到的数据绑定，组件分离，事件绑定在下一节继续探究