Fork me on GitHub

小程序之旅(七)

发表于 | 分类于 | 浏览 次
字数统计 2,418 | 阅读时长 11

小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。这是关于小程序的动态加载一个列表页小栗子。

微信小程序

这里的列表布局方式，采用flex弹性布局实现，具体内容可以参考flex 阮一峰

Num1

简单说一下布局，头部是一个title，下面是一个list，list是由一个一个的card组成，而对于card布局，主要是外部一个box，里面分左右img和内容。

list.wxml

1
2
3
4
5
6
7
8
9
10
11
12
13
<!--pages/list/list.wxml-->
<view class="box">
 <text class="list_header">每日一看</text>
  <view class="list" wx:for="{{list}}">
    <view class='list_img'>
      <image src="{{item.img}}" class='avatar'></image>
    </view>
    <view class='list_main'>
      <view class='list_title'>{{item.title}}</view>
      <view class='list_content'>{{item.content}}</view>
    </view>
  </view>
</view>

list.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
/* pages/list/list.wxss */
/*整个容器*/
.box{
display: flex;
flex-direction: column;/*竖直排列*/
}
/*title文字*/
.list_header{
font-size: 32rpx;
font-weight: bold;
color: #444;
padding:20rpx;
border-bottom: 2rpx solid #ccc;
}
/*列表项容器*/
.list{
display:flex;
flex-direction: row;/*横向排列*/
align-content: center;
border-bottom:1rpx solid #ccc;

}

/*图片容器*/
.list_img{
display: flex;
align-content: center;
padding:20rpx 10rpx;
}
/*图片*/
.avatar{
width:130rpx;
height:130rpx;
border-radius: 4rpx;
border: 1rpx solid #F2F2F2;
}
/*文字容器，包含标题和内容*/
.list_main{
display: flex;
flex-direction: column;/*文字竖直排列*/
align-content: center;
padding:40rpx 20rpx;
overflow: hidden;
}
.list_title{
font-size: 28rpx;
color: #717171;
font-weight: bold;
padding-bottom: 10rpx;
}
.list_content{
font-size: 24rpx;
color: #999;
}

list.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
// pages/list/list.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    list:[{
      img: 'http://localhost:9999/image/a1.jpg',
      title: '美丽的大海啊！',
      content: '大海啊全是水，美丽的海景让人赏心悦目！海景壁纸请欣赏！'
    },
      {
        img: 'http://localhost:9999/image/a2.jpg',
        title: '回不去的那叫从前',
        content: '回不去的那叫从前，到不了的才是远方；不保留的那叫青春，不完美的才是人生。'
      },
      {
        img: 'http://localhost:9999/image/a3.jpg',
        title: '森林生存恐怖游戏',
        content: '《森林》是一款PC平台开放世界生存恐怖游戏，游戏中玩家必须建造设施，探索世界，生存下去。《森林》将打造一个活生生的，气候多变，植被动态生长凋零，地下洞穴错综复杂的森林，等待玩家探索。'
      },
        ]
  },

（也可以使用本地node服务）

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
var express = require('express');
var fs = require('fs');
var app = express();
//处理静态资源
app.use(express.static('./'));
app.get('/list', function (req, res) {
    res.send({
        code: 200,
        data: [{
                img: 'http://localhost:9999/image/a1.jpg',
                title: '美丽的大海啊！',
                content: '大海啊全是水，美丽的海景让人赏心悦目！海景壁纸请欣赏！'
            },
            {
                img: 'http://localhost:9999/image/a2.jpg',
                title: '回不去的那叫从前',
                content: '回不去的那叫从前，到不了的才是远方；不保留的那叫青春，不完美的才是人生。'
            },
            {
                img: 'http://localhost:9999/image/a3.jpg',
                title: '森林生存恐怖游戏',
                content: '《森林》是一款PC平台开放世界生存恐怖游戏，游戏中玩家必须建造设施，探索世界，生存下去。《森林》将打造一个活生生的，气候多变，植被动态生长凋零，地下洞穴错综复杂的森林，等待玩家探索。'
            },
        ]
    });

});
app.listen(9999); //监听端口

Num2

接下来是img在头部，下方是文字内容。

list.wxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!--pages/listview/listview.wxml-->
<view class="box">
 <text class="list_header">每日一看</text>
  <view class="list" wx:for="{{list}}">
    <view class='list_img'>
      <image src="{{item.img}}" class='avatar'></image>
    </view>
    <view class='list_main'>
      <view class='list_title'>{{item.title}}</view>
      <view class='list_content'>{{item.address}}</view>
      <view class='list_content'>{{item.content}}</view>
    </view>
  </view>
</view>

list.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
/* pages/listview/listview.wxss */
/*整个容器*/
.box{
display: flex;
background: #ccc;
flex-direction: column;/*竖直排列*/
align-content: center;
}

/*列表项容器*/
.list{
background: #FFF;
display:flex;
flex-direction: column;/*竖直排列*/
align-content: center;
width:90%;
margin:20rpx auto;/*居中对齐*/


}

/*图片容器*/
.list_img{
display: flex;
align-content: center;
width:100%;
padding:20rpx 0rpx;
}
/*图片*/
.avatar{
width:100%;
height:400rpx;
border-radius: 4rpx;
border: 1rpx solid #F2F2F2;
}
/*文字容器，包含标题和内容*/
.list_main{
display: flex;
flex-direction: column;/*文字竖直排列*/
align-content: center;
padding:20rpx;
overflow: hidden;
}
.list_title{
font-size: 28rpx;
color: #717171;
font-weight: bold;
padding-bottom: 10rpx;
}
.list_address{
font-size: 24rpx;
color: #717171;
font-weight: bold;
padding-bottom: 10rpx;
}
.list_content{
font-size: 24rpx;
color: #999;
}

list.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
// pages/list/list.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    list:[{
      img: 'http://localhost:9999/image/a1.jpg',
      title: '美丽的大海啊！',
      content: '大海啊全是水，美丽的海景让人赏心悦目！海景壁纸请欣赏！'
    },
      {
        img: 'http://localhost:9999/image/a2.jpg',
        title: '回不去的那叫从前',
        content: '回不去的那叫从前，到不了的才是远方；不保留的那叫青春，不完美的才是人生。'
      },
      {
        img: 'http://localhost:9999/image/a3.jpg',
        title: '森林生存恐怖游戏',
        content: '《森林》是一款PC平台开放世界生存恐怖游戏，游戏中玩家必须建造设施，探索世界，生存下去。《森林》将打造一个活生生的，气候多变，植被动态生长凋零，地下洞穴错综复杂的森林，等待玩家探索。'
      },
        ]
  },

（也可以使用本地node服务）

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
var express = require('express');
var fs = require('fs');
var app = express();
//处理静态资源
app.use(express.static('./'));
app.get('/list', function (req, res) {
    res.send({
        code: 200,
        data: [{
                img: 'http://localhost:9999/image/a1.jpg',
                title: '美丽的大海啊！',
                address: '1美丽的大海啊！',
                content: '大海啊全是水，美丽的海景让人赏心悦目！海景壁纸请欣赏！'
            },
            {
                img: 'http://localhost:9999/image/a2.jpg',
                title: '回不去的那叫从前',
                address: '1回不去的那叫从前',
                content: '回不去的那叫从前，到不了的才是远方；不保留的那叫青春，不完美的才是人生。'
            },
            {
                img: 'http://localhost:9999/image/a3.jpg',
                title: '森林生存恐怖游戏',
                address: '1森林生存恐怖游戏',
                content: '《森林》是一款PC平台开放世界生存恐怖游戏，游戏中玩家必须建造设施，探索世界，生存下去。《森林》将打造一个活生生的，气候多变，植被动态生长凋零，地下洞穴错综复杂的森林，等待玩家探索。'
            },
        ]
    });

});
app.listen(9999); //监听端口

Num3

上面的样式都是很常见的列表页，我们最终的用户交互效果这样是很不友好的，那就在里面加入下拉刷新，底部加载更多，这样才符合用户的操作习惯。

主要点：

1
2
3
4
5
6
7
8
9

list.json配置:

"enablePullDownRefresh": true

需要捕获这两个事件：

onReachBottom（滚动到底部事件）
onPullDownRefresh（下拉刷新事件）

本地服务：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var express = require('express');
var fs = require('fs');
var app = express();
//处理静态资源
app.use(express.static('./'));
app.get('/list/:num',function(req,res){
var num = req.params.num;//页码
var arr = [];
(function(){
for(var i=(num*5-5);i<(num*5);i++){
var obj = {id:i+1,img:'http://localhost:9999/image/1.jpg',title:'这是第'+(i+1)+'条数据',address:'韩国，济州岛',content:'据说半个亚洲的女生都想去权志龙的咖啡厅上班。要是你也想去济州岛的蓝天白云下喝咖啡，偶遇权志龙，那么将是一件非常令人兴奋的事情！'};
arr.push(obj);
}
})();

res.send({
code: 200,
page:num,
data: arr
});

});
app.listen(9999);//监听端口
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!--pages/listview/listview.wxml-->

<loading hidden="{{isLoading}}">加载中...</loading>


<view class="box">
  <view wx:if="{{isRefesh}}">
   <icon type='waiting' size='45'></icon>
   <text>刷新中...</text>
  </view>

  <view class="list" wx:for="{{list}}" id="{{page}}">
    <view class='list_img'>
      <image src="{{item.img}}" class='avatar'></image>
    </view>
    <view class='list_main'>
      <view class='list_title'>{{item.title}}</view>
      <view class='list_content'>{{item.address}}</view>
      <view class='list_content'>{{item.content}}</view>
    </view>
  </view>
</view>
1
2
3
<!-- listview.json -->

{"enablePullDownRefresh": true}
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
// pages/listview/listview.js
Page({
  data: {
    list: [],//列表项数据
    page: 1,//页码
    isRefesh: false,//是否刷新
    isLoading: true//正在加载
  },
  //下拉刷新
  onPullDownRefresh: function () {
    var that = this;
    that.setData({ isRefesh: true });//刷新条出现
    wx.request({
      url: 'http://localhost:9999/list/1',
      method: 'GET',
      success: function (res) {
        var listdata = res.data.data;
        setTimeout(function () {
          wx.stopPullDownRefresh;//停止下拉刷新效果
          that.setData({ page: 1 });//重置页码
          that.setData({ list: listdata, isRefesh: false });//重新设置列表项和刷新条消失
        }, 1000);

      }
    });
  },
  //滑到底部加载
  onReachBottom: function () {
    var that = this;
    var page = that.data.page + 1;
    var oldData = this.data.list;//老数据
    that.setData({ isLoading: false });//loading出现
    wx.request({
      url: 'http://localhost:9999/list/' + page,
      method: 'GET',
      success: function (res) {
        var allData = [];
        var listdata = res.data.data;//新数据
        allData = oldData.concat(listdata);//老数据和新数据合并
        that.setData({ list: allData, page: page });//重新设置列表项和页码
        setTimeout(function () {
          that.setData({ isLoading: true });//loading消失
        }, 1000);
      }
    })
  },
  //页码初始化
  onLoad: function (options) {
    var that = this;
    that.setData({ isLoading: false });//loading出现
    wx.request({
      url: 'http://localhost:9999/list/1',
      method: 'GET',
      success: function (res) {
        var listdata = res.data.data;
        that.setData({ list: listdata });
        setTimeout(function () {
          that.setData({ isLoading: true });//loading消失
        }, 1000);
      }
    })
  }

})

本文标题:小程序之旅(七)

文章作者:DRLong

发布时间:2018年08月08日 - 23:08

原始链接:https://duanruilong.github.io/2018/08/08/小程序之旅-七/ 复制文章链接==>

-------------我是一条分割线感谢您的阅读-------------
DRLong WeChat Pay

微信打赏

DRLong Alipay

支付宝打赏