⑥ 信息标签
页面结构如下：
<!-- 信息标签 --> <view class="info-tag-container"> <block wx:for="{{yx.tag_info_list}}"> <view class="tag-wrapper"> <image class="tag-image" src="{{item.icon}}"></image> <view class="tag-text">{{item.text}}</view> </view> </block> </view>
样式调整顺序如下：
- 最外层高度48rpx，flex布局，两端对齐留白；
- 外层flex布局，内容居中；
- 标签图片宽高24rpx，右侧偏离8rpx；
- 标签字体颜色#ff4891，大小22rpx;
对应样式文件如下：
.info-tag-container { height: 48rpx; display: flex; justify-content: space-around; } .tag-wrapper { align-items: center; display: flex; } .tag-image { width: 24rpx; height: 24rpx; margin-right: 8rpx; } .tag-text { font-size: 22rpx; color: #ff4891; }
运行结果如下：
⑥ 商品分类
这里的商品分类不止10个，滑动到右侧还有3个，可以用官方提供的scroll-view组件来实现，详细官方文档：
developers.weixin.qq.com/miniprogram…
scroll-view的用法也很简单：scroll-x横向滚动，scroll-y纵向滚动，说个小bug~
scroll-view本身的display:flex不生效，外层元素需要设置属性white-space: nowrap，内层元素需要设置属性display: inline-block，如果内层元素需要用到flex布局，可以设置属性display: inline-flex; 还有内层元素不可以用float浮动。
接着滑动部分的，一个简单的套路是：宽度写死 = 每个商品View的宽度 * 7，不过这种方法有点low。看了下每日优鲜的玩法，是把这里拆分成了两个部分，这里照葫芦画瓢实现一波。
页面结构如下：
<!-- 商品类别 --> <view class="good_category_container"> <scroll-view scroll-x class="scroll-view"> <view class="category_first"> <block wx:for="{{yx.category_list_first}}" wx:key="key"> <view class="good_category"> <image class="category-image" src="{{item.icon}}"></image> <view class="category-text">{{item.text}}</view> </view> </block> </view> <view class="category_second"> <block wx:for="{{yx.category_list_second}}" wx:key="key"> <view class="good_category"> <image class="category-image" src="{{item.icon}}"></image> <view class="category-text">{{item.text}}</view> </view> </block> </view> </scroll-view> </view>
样式调整顺序如下：
- 最外层宽度100%，设置white-space: nowrap;
- scroll-view设置最大高度360rpx；
- 左侧部分，宽度100%，inline-flex，自动换行；
- 右侧部分，高度384rpx，inline-flex，主轴从上往下；
- 分类外层，flex布局，水平竖直居中，主轴从上往下，宽150rpx，顶部偏移24rpx；
- 分类图标，宽高104rpx；
- 分类文本，高34rpx，行高34rpx让文本垂直居中，字体颜色#474245，大小24rpx，顶部偏移10rpx；
对应样式文件如下：
.good_category_container { width: 100%; white-space: nowrap; } .scroll-view { max-height: 360rpx; } .category_first { width: 100%; display: inline-flex; flex-wrap: wrap; } .category_second { height: 384rpx; display: inline-flex; flex-direction: column; flex-wrap: wrap; } .good_category { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 150rpx; margin-top: 24rpx; } .category-image { width: 104rpx; height: 104rpx; } .category-text { font-size: 24rpx; color: #474245; height: 34rpx; line-height: 34rpx; margin-top: 10rpx; }
运行结果如下：
⑦ 悬浮提醒
这种悬浮在页面上，不会因为页面滚动而滚动的部分，可以使用固定定位来实现。
页面结构如下：
<!-- 浮动提醒 --> <view class="tip-container"> <image class="tip-image" src="{{yx.tip_image_url}}"></image> </view>
样式调整顺序如下：
- 外层容器设置绝对定位，宽98rpx，高130rpx，离右边28rpx，离底部40rpx；
- 图片设置宽高100%；
对应样式文件如下：
.tip-container { position: fixed; right: 28rpx; bottom: 40rpx; width: 98rpx; height: 130rpx; } .tip-image{ width: 100%; height: 100%; }
运行结果如下：
⑧ 最终效果展示
Tips：真机预览时发现分类那里滑动时有滚动条，可以在wxss加入下述样式隐藏滚动条~
::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
