第一个页面page（微信小程序无师自通七）_微信小程序的page标签-CSDN博客

本文链接：https://blog.csdn.net/ot512csdn/article/details/130483612

本文介绍了如何使用微信小程序的WXML和WXSS进行前端开发，创建一个显示多个item的List页面。每个item分为左右两部分，右侧部分又细分为上下两个区域。通过Flex布局管理页面元素，实现了良好的视觉效果。点击item可进入编辑页面。

微信小程序的开发，不可避免要接触前端CSS，今天完成了一个List数据显示多个item的页面，总结记录一下。微信小程序就是由一个一个的page构成，类似于WINFORM程序中的窗口，每一个页面page，用WXSS做样式，WXML做页面元素。借鉴其它汽车保养小程序，我准备做一个类似的页面用来展示车辆：

可以看得，页面元素如果较多，需要分层次；比如每一个item数据，命名为L0_item。

item中，分为左右部分：l1_left、l1_right。

l1_right中又分为上下部分：l2_top、l2_down。

<!--pages/car/car.wxml-->

  <view class='page-header'>
    <text class='page-title'>{{title}}</text>
  </view>

  <view class="car" wx:for="{{carlist}}" wx:key="id">

    <view class='l0_item'   data-item =  '{{item}}'  bindtap = 'car_edit'>      

      <view class='l1_left'>  <image class='pic_image' src="{{item.pic_url}}" mode="" /> </view>

      <view class='l1_right'>
        <view class='l2_top'>
          <view class="txt_titel">{{item.name }} </view>
        </view>

          <view class='l2_down' style="white-space:pre-wrap" >
            <view class="txt_share">{{ (item.share == 1 )?'是':'' }}\n   <Text class="grey-text">数据共享</Text>   </view>
            
            <view class="txt_times"> <Text class="blue-text"> {{ item.txt }} </Text> 次  \n <Text class="grey-text">事件次数</Text> </view>
        </view>      
      </view>
    </view>     
  </view>

/* pages/car/car.wxss */

.pic_box
{
  display:flex;   
  /*flex-direction: column;   让一行里面的元素，上下排列    */
  justify-content: center; 
}
.l1_left
{
  display:flex; 
}
.pic_image 
{ 
  width: 100px;
  height: 100px;
  padding: 10px 10px 10px 10px;
}
.l1_right
{
  width: 70%;  
  /*text-align: center; */
  padding: 10px 10px 10px 10px;
}
.l2_top
{  
  justify-content: center;  
}
.l2_down 
{
  display: flex;  
  flex-direction:row;  
  padding: 10px 10px 10px 10px;
}
.l0_item 
{
  display:flex;  
  flex-direction:row;  
}
.red-text {  color:red}
.grey-text { color:grey }
.blue-text { color:blue }

最后完成界面如下，看起来还不错，点击一行item,就可以转到编辑页面去。