微信小程序前端开发日记

布局（vantUI框架）

flex和layout布局列表

1.flex
flex布局属性详见http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
首先给要渲染的列表根节点上添加样式
遇到的主要问题：
a.flex和inlineflex的区别
flex：用于子元素在父元素的包含关系下的居中排布关系
inline-flex：适用在父元素上对子元素添加样式
b flex对列表元素宽度的影响
设宽度：justify-content/align-content等
不设宽度：flex-wrap属性

//css
.lists{
  background: #F0F3F8;
  border-radius: 2px;
  width: calc(100% - 20px);
  padding: 10px;
  display: inline-flex;
  justify-content: space-between;
  }

 <view class="list">
      <view wx:for="{{list}}" wx:key="index" data-id='{{item.cid}}'>
              <image src="{{item.img}}" class='hurrylist-img' mode="aspectFit"></image>
              <view class="list1">￥{{filter.priceFilter(item.priceNow)}}</view>
              <view class="list2">￥{{filter.priceFilter(item.price)}}</view>
      </view>
</view>

2.layout布局
gutter：col之间间隔的距离
span：相对于24为总数，每个列的宽度大小，3列就是8，4列6，根据间隔来计算列表元素宽度

<van-row gutter="15"> 
           <van-col span="6" wx:for="{{list}}" wx:key="index" data-id="{{cid}}" >
               <image src="{{item.img}}" class='hurrylist-img' mode="aspectFit"></image>
             <view class="list-text1">￥{{filter.priceFilter(item.priceNow)}}</view>
             <view class="list-text2">￥{{filter.priceFilter(item.price)}}</view>
           </van-col>
</van-row>

结果显示

使用filter

1.在要引入过滤器的HTML的页面添加引用

<wxs src='../../filter/filter.wxs' module='filter' />

2.过滤器代码

//filter/filter.wxs
function priceFilter(value) {
  return parseFloat((value||0)/100).toFixed(2);

module.exports = {
  priceFilter: priceFilter
}