微信小程序前端开发
布局(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
}