小程序开发之垂直列表

小程序一不小心站在了风口，身为android开发的我也不得不去了解了解小程序的开发，在学习过程中，发现布局是非常另小编着急的，于是就花费了两天的时间专门学习一下布局。略有成果，就拿出来分享一下：如下图

好了废话不多说了直接撸代码。下面是页面组件

      <view class='list'>
           <block wx:for="{{movies}}">
             <view class='item' bindtap='detail'>
               <image mode='aspectFill' src='{{item.src}}'></image>
               <text>{{item.title}}</text>
               <view class='best'>
               <text class='price'>$18</text>
               <text class="add">加入购物车</text>
               </view>
             </view>
           </block>
</view>

这个是wxss

.list{
  display: flex;  //可伸缩布局
  flex-wrap: wrap; //根据空间自动调整
   padding: 0rpx 0rpx 20rpx 30rpx;
  }
.list .item{
  position: relative;  
  text-align: center;//居中
   width: 210rpx;
   font-size: 24rpx;
   margin-top: 30rpx;
    margin-left: 30rpx;
}
.list .item image{
  height: 325rpx;
  width: 100%;
  box-shadow: 3px 3px 4px #777 //设置图片大小
}
.list .item text{
  width: 100%;
  height: 32rpx;
  margin-top: 10rpx;
  color: black;
  line-height: 32rpx;
  text-align: center;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; //设置文字显示规则
}
.list .item .best{
   height: 40rpx;
  color: red;
  margin-top: 10rpx;
  line-height: 32rpx;
  text-align: left;
   display: flex;
  flex-direction: column;
 
}
.list .item .price{
  color: red;
  text-align: left;
  font-size: 34rpx
}
.list .item .add{
  position: absolute;
  color: red;
  text-align: right;
}

没有合适的数据，小编就自创了一个数据格式

// pages/creat/creat.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    pageType:"create",
    movies: [{ src: "http://img0.pconline.com.cn/pconline/download/index/2016xzsyjdt/1804/sss.png", title: "乡镇天地的世界" },
    { src: "http://img0.pconline.com.cn/pconline/download/index/2016xzsyjdt/1804/sss.png", title: "乡镇天地的世界" }, { src: "http://img0.pconline.com.cn/pconline/download/index/2016xzsyjdt/1804/sss.png", title: "乡镇天地的世界" }, { src: "http://img0.pconline.com.cn/pconline/download/index/2016xzsyjdt/1804/sss.png", title: "乡镇天地的世界" }, { src: "http://img0.pconline.com.cn/pconline/download/index/2016xzsyjdt/1804/sss.png", title: "乡镇天地的世界" }, { src: "http://img0.pconline.com.cn/pconline/download/index/2016xzsyjdt/1804/sss.png", title: "乡镇天地的世界" }, { src: "http://img0.pconline.com.cn/pconline/download/index/2016xzsyjdt/1804/sss.png", title: "乡镇天地的世界" }, { src: "http://img0.pconline.com.cn/pconline/download/index/2016xzsyjdt/1804/sss.png", title: "乡镇天地的世界" }, { src: "http://img0.pconline.com.cn/pconline/download/index/2016xzsyjdt/1804/sss.png", title: "乡镇天地的世界" }, { src: "http://img0.pconline.com.cn/pconline/download/index/2016xzsyjdt/1804/sss.png", title: "乡镇天地的世界" }, { src: "http://img0.pconline.com.cn/pconline/download/index/2016xzsyjdt/1804/sss.png", title: "乡镇天地的世界" }]
  },

  sort:function(){
    wx:wx.navigateTo({
      url: '../short/short',
      success: function(res) {},
      fail: function(res) {},
      complete: function(res) {},
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  
  },

  detail:function(){
    wx.navigateTo({
      url: '../detail/detail',
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  
  }
})

下面我们来所以说，wxss中用到的Flex布局：

Flex 是Flexiable BOX 的缩写，即为弹性盒子，可以为传统的盒子模型带来更大的灵活性

Flex布局主要有容器和项目构成，采用Flex布局，称为Flex布局：

容器的属性主要有：

display :通过设置display属性，指定元素是否为Flex布局。

flex-direction 指定主轴方向，决定项目的排列顺序。

flex-wrap 排列换行设置。

just-content ：定义项目的主轴的对其方式

align-content :定义多根轴线的对其方式，如果只有一根轴线，该属性不起作用。

具体的用法就不介绍了，百度一下就可以了。