微信小程序丨利用position: absolute实现imag

刚开始学小程序，琢磨了一天图层的嵌套，终于可以写出来一个实际的页面。我能够实现的，你们看了之后也可以实现，废话不多说，先上完成后的效果图：

设备列表页面

先将这个列表分成单个的Cell元素，完成一个Cell布局的编写之后，循环调用生成就可以了。

单个Cell

如上图所示，底部是一张背景图片，在图片的左上方，有一个代表信号值的小图标，小图标旁边则是设备的名称，左下方还有一个查看详情的文本展示。经过简单的分析，可以将整个Cell分成3个小块来写布局。

1、背景图片image。
2、信号值小图标和设备名文本。
3、查看详情文本。

wxml代码如下：

<view class="listCell">
  <image class="cellImage" src="/images/devlist/img_list_cell.png" mode="widthFix"></image>
  <view class="cellInfo">
    <image class="iconRSSI" src="/images/devlist/rssi_0.png"></image>
    <view class="devName">测试设备</view>
  </view>
  <view class="cellDetail">查看详情</view>
</view>

其中背景图的填充模式需要设置为mode="widthFix"，这样view容器才可以自动计算高度。

wxss代码如下：

.listCell {
  display: flex;  /*设置为弹性布局*/
  flex-direction: column;
  margin: 15px;  /*上下左右距离边界有15px的空白*/
  width: auto;  /*宽高自动计算*/
  height: auto;
}

.cellImage {
  width: 100%;  /*背景图选择填充满整个view*/
  height: 100%;
}

.cellInfo {
  position: absolute;  /*关键属性，将第2个小块的position设为absolute*/
  margin-left: 15px;
  margin-top: 5px;
  display: flex;  /*设置为左右布局*/
  flex-direction: row;
  width: auto;  /*宽高自动计算*/
  height: auto;
  align-items:center;
}

.iconRSSI {
  width: 18px;
  height: 18px;
}

.devName {
  color: white;
  margin-left: 10px;
  font-size: 18px;
}

.cellDetail {
  background: #00B99B;
  color: white;
  position: absolute;  /*关键属性，将第3个小块的position设为absolute*/
  margin-left: 6px;
  margin-top: 44px;
  font-size: 13px;
  padding-left: 6px;  /*设置文本内边距padding值*/
  padding-right: 10px;
  padding-top: 2px;
  padding-bottom: 2px;
  border-radius: 0px 20px 20px 0px;  /*设置文本右侧圆角显示*/
}

编译运行之后就可以显示出单个Cell的效果图了，代码中关键属性部分加了注释，如果还是看不懂的建议自行去查看CSS样式教程。

如果想要生成更多的Cell在页面中展示，需要将wxml文件稍作改动，添加wx:for语句就可以实现循环生成了，text文本也需要绑定变量{{item.name}}以便读取数组中的设备名称，改动后的代码如下：

<view class="listCell" wx:for="{{listArray}}" wx:key="value">
  <image class="cellImage" src="/images/devlist/img_list_cell.png" mode="widthFix"></image>
  <view class="cellInfo">
    <image class="iconRSSI" src="/images/devlist/rssi_0.png"></image>
    <view class="devName">{{item.name}}</view>
  </view>
  <view class="cellDetail">查看详情</view>
</view>

最后，在page对应的js文件中，将listArray数组进行初始化就可以了：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    listArray : [
      { name: "测试设备 1", value: "0" },
      { name: "测试设备 2", value: "1" },
      { name: "测试设备 3", value: "2" },
      { name: "测试设备 4", value: "3" },
      { name: "测试设备 5", value: "4" },
      { name: "Experience Case", value: "5" },
    ]
  },
  ...
  ...
})