小程序实战分享4：主商品页与tabbar的UI创建

本课主要内容：

• 创建仿微信式tabbar导航布局
• 创建主页（商品页）列表布局
• 使用循环渲染
• 使用页面导航
• 使用引用

1，升级开发工具至最新版本

打开后会提示升级，确认即可。这次改动很大，开发工具越来越完善了，有几个值得注意：

• 添加了textarea，在上一课我们的商品描述还是单行输入，现在可以多行输入了。
• 添加了wx.toast、wx.actionSheet等人性化UI接口，不用再以在页面里声明它们再显示的方法使用了。
• 开发工具添加了保存后自动编译的特性。
• 其它等等，详见升级说明。

这个树状按钮，用于切换侧边栏，很有用。快捷键是CMD+\

2，创建一个quick start项目

将logs目录删除，并在app.json中删除该页面的声明：

"pages":[ "pages/index/index", ],

3，引用

在pages目录下直接创建两个wxml文件:

顾思思义，前者是尾部使用，后者在页首使用。将index.wxml内容清空，输入：

<include src="../header.wxml"/> <include src="../footer.wxml"/>

include可以将目标文件的整个代码引入，相当于是拷贝到include位置，即是代码块复用。

实践：在header.wxml与footer.wxml中随意放入一些内容，运行看看。例如：

<view> <text>footer</text> </view>

思考：这里使用了相对地址，如果使用绝对地址引用header.wxml文件，应该如何写？

4，关于tab

小程序还没有提供tabbar组件，自己写一个tabbar组件的难点主要在css样式，在footer.wxml中输入：

以上代码后面须补一个</div>，再添加另一个“我的”navigator，即成一个tabbar。

与之相关的css，在app.wxss中：

/*footer start*/ .weui-tabbar { display: -webkit-box; display: -webkit-flex; display: flex; position: absolute; z-index: 500; bottom: 0; width: 100%; background-color: #f7f7fa; height:55px; } .weui-tabbar__item { display: block; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; padding: 7px 0 0; font-size: 0; color: #999999; text-align: center; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .weui-tabbar__item-hover{ background-color: rgba(0, 0, 0, 0.2); opacity: 0.8; } .weui-tabbar__item::first-child{ padding-bottom:5rpx; } .weui-tabbar__item-on text{ color:#ff6600; } .weui-tabbar__icon { display: inline-block; width: 24px; height: 24px; } .weui-tabbar__label { text-align: center; color: #999999; font-size: 12px; padding-top: 15rpx; } /*footer end*/

掌握css用法，只有多试，多看。多看css3文档，多学习别人的代码，多尝试实现效果，别无它法。

5，关于导航

在pages目录下新建一个my目录，并在my目录下新建my.wxml与my.js文件。

my.wxml的内容：

该内容没有特别的用途。

在footer.wxml中，navigator是导航组件，

redirect属性的使用，使用页面切换时不保留上一页，即没有页面推入效果，是替换的。这个代码是使用了循环绑定之后的代码，下面会讲到。将{{}}内换成具体的数值即可以显示。

其中url是页面地址，这里可以使用与app.json定义的一样的地址：

目前只有两个页面： /pages/index/index

/pages/my/my

6，tab切换效果

这个tab有一个被选中的切换效果：

这个效果是怎么实现的？

很简单，控制图片地址与文本颜色。在index.js文件中，有一个名为tabs的data数据：

在data对象内定义的数据，可以在wxml页面中绑定。

在my.js中也有tabs数据：

仔细看一下，两个Js文件中的tabs数据并不完全相同，只是数据结构相同。每一个tab icon图片都有两张，一为选中，一为未选中。其中weui-tabbar__item-on：

只是改变文本的颜色，这与网页开发的手法一样。

在footer.wxml中，使用了for循环绑定，在上面已经看到了：

在这里item是默认的循环名，还有一个默认索引数字叫index。

在组件上使用wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。 默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item。

7，需要列表效果

如何实现这样的一个列表效果，主要也是css样式。index.wxml：

<navigator url="javascript:void(0);" class="weui-media-box weui-media-box_appmsg"> <view class="weui-media-box__hd"> <image class="weui-media-box__thumb" src="/images/bike.jpeg" alt=""/> </view> <view class="weui-media-box__bd"> <text class="weui-media-box__title">商品标题二</text> <view class="weui-media-box__desc">永久30速智能自行车 27.5英寸铝合金山地车/男女式单车/锁死前叉/2培林花鼓 R100 黑红色</view> </view> </navigator>

app.wxss中的样式：

.weui-media-box { color: #000000; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 20rpx 30rpx; position: relative; } .weui-media-box:before { content: " "; position: absolute; top: 0; right: 0; height: 1px; border-top: 1px solid #E5E5E5; color: #E5E5E5; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); left: 15px; } .weui-media-box_appmsg { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; } .weui-media-box_appmsg .weui-media-box__hd { margin-right: .8em; width: 60px; height: 60px; line-height: 60px; text-align: center; } .weui-media-box_appmsg .weui-media-box__thumb { width: 100%; max-height: 100%; vertical-align: top; } .weui-media-box_appmsg .weui-media-box__bd { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; min-width: 0; } .weui-media-box__title { font-weight: 400; font-size: 17px; width: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: break-all; line-height: 70rpx; } .weui-media-box__desc { color: #999999; font-size: 13px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

css3样式，有一些基本的规则，有些同学没有接触过，不了解。像：

.weui-media-box__desc

前面有一个圆点（.），代表这是一个class，是使用在组件的class属性上的，例如：

而像这样的样式声明：

view{...}

是应用在所有view组件之上，无须显式赋予。

第二课作业

• 阅读css3文档全篇：http://www.w3school.com.cn/css/
• 阅读官方的组件文档中form表单组件部分

链接：https://mp.weixin.qq.com/debug/wxadoc/dev/component/button.html?t=1477656488864