微信商城小程序(一)

1,tabBar,在全局app.json配置
微信商城小程序(一)
2,轮播图以及数据绑定
2.1 wxml页面结构,接受index.js传值,以及循环绑定,view相当于div,block用于wx:for循环,循环{{imgs}}
{{item}}用于展示数据。只需要swiper以及swiper-item就可以构成轮播图
微信商城小程序(一)
2.2 js,data相当于view的data
微信商城小程序(一)
3 我的页面,注意清掉app.wxss里面默认的内边距,这个naviStyle:custom;用于自定义导航,只显示胶囊,
3.1,页面结构
微信商城小程序(一)
3.2,样式
微信商城小程序(一)

3.3,整体
微信商城小程序(一)
4,按钮导航flex布局
4.1 页面结构
微信商城小程序(一)
4.2 样式,flex布局
微信商城小程序(一)
5,商品区域
5.1 商品头部
微信商城小程序(一)
5.2 商品盒子
微信商城小程序(一)

5.3跳转
微信商城小程序(一)

6,商品标题描述和价格两部分布局,flex-dtrection为竖向,space-between,价格为justify-content:flex-end
微信商城小程序(一)
6.1,样式
微信商城小程序(一)

7,scroll-view,
7.1
微信商城小程序(一)
7.2
微信商城小程序(一)

8,三列
8.1
微信商城小程序(一)
8.2
微信商城小程序(一)

相关文章: