上一章我们从页面的实战开发角度讲解了前端代码编写的一些技巧，本章我们继续探讨小程序前端页面开发的技巧与应避开的大坑。（是的，我踩了一个很大的坑，到现在才发现）转载自NanDoDu的博客。

（划重点！划重点！划重点！）view 布局

  说真的，对于初学者来说，view布局这一块在网上查来查去就是弹性盒子、flex、弹性盒子、flex……反复横跳，我昨天查了一晚上怎么让文字在图片的右侧靠右显示（前提是文字在图片上方），答案无一不是float、right、float、right……反复横跳。那么我就从实际应用的角度来介绍两个常用的view布局。

弹性盒子布局

  因网上关于这个的资料太多，此处只说优点和缺点。

  优点：

  • 简单方便，快速对齐，快速布局

  • 网上资料多，可借鉴代码多

  缺点：

  • 灵活性太差，尤其是对初学者而言（比如我）

  • margin调整位置受前一个view的影响

  • 很难做到横向对齐的同时纵向对齐（即，很难做到横向弹性盒子和纵向弹性盒子同时设置）

自由布局

  对外层view不声明flex，内层位置的调节只靠margin-top和margin-left，小程序对右对齐的适配性极差（个人观点），因此能以左边框为基准就不以右边框为基准。

实现qq列表下拉功能代码模板

  多层嵌套渲染列表与列表展开/收起的应用，类似开发可直接借鉴下述模板。

  .wxml文件代码模板：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<view class = 'pagename'>
  
  // 下拉条列表渲染逻辑（第一层列表）
  <block wx:for-items = "{{missionInfoData}}">
    <view class = "bar" bindtap = 'toggleBtn' id="{{item.id}}">
      <image class = 'barimage {{item.id > 0?"":"hidden"}}' src='{{item.imgurl}}'></image>
      <image class = 'barimage {{item.id > 0?"hidden":""}}' src='{{item.imgurl1}}'></image>
      <view class = 'barinfo'>
        <view class = 'barname'>
          <text>{{item.barname}}</text>
        </view>
        <view class = 'barnum'>
          <text>{{item.barnum}}</text>
          <text>/</text>
          <text>{{item.barNum}}</text>
        </view>
      </view>
    </view>

    //下拉内容列表渲染逻辑（第二层列表）
    <block wx:for-items = "{{item.content}}" wx:for-item = "content">
      <view class = "mission {{item.id > 0?'hidden':''}}">
        <view class = 'timeimageview'>
          <image class = 'timeimage' src='/icons/resttime.png'></image>
        </view>
        <view class = 'timetextview'>
          <text class = 'timetextnum'>{{content.day}}</text>
          <text>天</text>
        </view>
        <view class = 'missionnameview'>
          <view class = 'missionnameview1'>
            <text>{{content.name}}</text>
          </view>
          <view class = 'missionnameview2'>
            <text>{{content.type}}</text>
          </view>
        </view>
        <view class = 'stateview'>
          <image class = 'stateimage' src='{{content.statecolor}}'></image>
        </view>
      </view>
    </block>
  </block>
</view>

  .js文件代码模板:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
Page({
  data: {
    missionInfoData: []
  },

  onLoad: function (options) {
    var that = this;

    var data = {
      "datas": [
        {
          "id": 1,
          "imgurl": "/images/ingbar.png",
          "imgurl1": "/images/ingbar1.png",
          "barname": "在读图书",
          "barnum": 2,
          "barNum": 3,
          "content": [
            {
              day: 20,
              name: "小程序入门",
              type: "计算机",
              statecolor: "/icons/lamp.png"
            },
            {
              day: 10,
              name: "小程序实战",
              type: "计算机",
              statecolor: "/icons/lamp.png"
            },
            {
              day: 30,
              name: "资本论",
              type: "经济学",
              statecolor: "/icons/lamp1.png"
            }
          ]
        },
        {
          "id": 2,
          "imgurl": "/images/ingbar.png",
          "imgurl1": "/images/ingbar1.png",
          "barname": "在阅资源",
          "barnum": 2,
          "barNum": 2,
          "content": [
            {
              day: 15,
              name: "概率论.pdf",
              type: "数学",
              statecolor: "/icons/lamp.png"
            },
            {
              day: 20,
              name: "计算机网络.pdf",
              type: "计算机",
              statecolor: "/icons/lamp.png"
            }
          ]
        },
        {
          "id": 3,
          "imgurl": "/images/ingbar.png",
          "imgurl1": "/images/ingbar1.png",
          "barname": "当前竞赛",
          "barnum": 1,
          "barNum": 1,
          "content": [
            {
              day: 35,
              name: "高校小程序开发大赛",
              type: "应用比赛",
              statecolor: "/icons/lamp.png"
            }
          ]
        }
      ]
    };
    that.setData({
      missionInfoData: data.datas
    })
  },
  
  // 实现各列表展开独立进行，也可设置全局变量实现唯一列表展开
  toggleBtn: function (event) {
    var that = this;
    var itemId = event.currentTarget.id;
    if(itemId < 0) {
      itemId = -itemId;
    }

    // 不这样处理的话会报错
    var up = "missionInfoData[" + (itemId - 1) + "].id";
    var resId = -event.currentTarget.id;
    that.setData ({
      [up]: resId
    })
  }
})

  .wxss文件代码模板：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
.topInfo {
  margin-top: 20rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100vw;
  height: 60rpx;
}

.topImage1 {
  height: 30rpx;
  width: 30rpx;
  margin-left: 20rpx;
}

.topImage2 {
  height: 50rpx;
  width: 50rpx;
  margin-left: 630rpx;
}

.bar {
  width: 100vw;
  height: 100rpx;
}

.barimage {
  height:100rpx;
  width: 100vw;
}

.barname {
  display: block;
  margin-left: 70rpx;
  margin-top: -78rpx;
  height: 50rpx;
  width: 200rpx;
}

.barinfo {
  width: 100vw;
  height:100rpx;
}

.barnum {
  margin-top: -50rpx;
  margin-left:675rpx;
}

.mission {
  background: whitesmoke;
  height: 150rpx;
  width: 100vw;
}

.missionnameview {
  display: flex;
  flex-direction: column;
  margin-left: 230rpx;
  margin-top: -120rpx;
  height: 50rpx;
  width: 300rpx;
}

.missionnameview1 {
  height: 50rpx;
  width: 300rpx;
}

.missionnameview2 {
  height: 50rpx;
  width: 300rpx;
}

.timeimageview {
  height: 100rpx;
  width: 100rpx;
}

.timeimage {
  width: 80rpx;
  height: 80rpx;
  margin-left: 10rpx;
  margin-top: 30rpx;
}

.timetextview {
  width: 100rpx;
  height: 100rpx;
  margin-left: 100rpx;
  margin-top: -50rpx;
}

.stateview {
  margin-left: 683rpx;
  margin-top: -30rpx;
  height: 50rpx;
  width: 50rpx;
}

.stateimage {
  width: 30rpx;
  height: 30rpx;
}

// 显示/隐藏属性
.hidden {
  display: none;
}