目标:
- 导航栏样式及文字更改
- 添加
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 页面大功告成,里面涉及到的数据绑定,组件分离,事件绑定在下一节继续探究