在小程序中頁面中的列表是最基本的實現(xiàn)，讓我們用一個小實例來寫一下吧。
效果圖如下：

列表效果圖

小實例主要 view 及 wx:for 配合實現(xiàn)的，頁面布局用了一些布局屬性，對于我這個小白新手來講真的寫出來費了不少勁，其次是查資料實現(xiàn)了列表的點擊事件。

實現(xiàn)方法：
1、在小程序頁面對應(yīng)的.wxml文件中，布局文件如下。

<view wx:for="{{list}}" wx:key="index" data-id="{{item.id}}">
    <!-- 名稱與語句 -->
    <view class="row" id="{{index}}" bindtap="rowTapped" >
        <view class="content" >
            <view class="top">
                <view class="nickname">{{item.nickname}}</view>
                <view class="sentence">{{item.last_content}}</view>
            </view>
        </view>
        <view class="imgview" >
            <image class="img" mode="aspectFit" src="{{item.head_img_url}}" />
        </view>
    </view>
</view>

2、在小程序頁面對應(yīng)的.wxss文件中，樣式我自己初步寫寫，給大家一個效果。

/*單元行*/
.row {
  height: 120px;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 10rpx;
  border-bottom: 10px solid #ececec;
}

/*文字主體*/
.content {
    height: 120px;
    display: flex;
    width: 60%;
    padding-right: 20rpx;
    flex-direction:column;
    align-items: center;
}
/*文字主體內(nèi)套*/
.top {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

/*昵稱*/
.nickname {
  width: 100%;
    color: #4d4d4d;
    font-size: 36rpx;
}

/*話語*/
.sentence {
    color: #ccc;
    font-size: 28rpx;
    margin-top: 6rpx;
    overflow: hidden; 
    text-overflow: ellipsis; 
    max-lines: 2;
}
.imgview{
  height: 120px;
    display: flex;
    width: 40%;
    flex-direction:column;
    align-items: center;
}
/*圖*/
.img {
  width: 100%;
  height: 100%;
}

3、在小程序頁面對應(yīng)的.json文件中我沒有沒有代碼的。
4、在小程序頁面對應(yīng)的.js文件中，也是最重要的就是邏輯處理如下。

const imgUrlList = [
  'http://mmbiz.qpic.cn/sz_mmbiz_jpg/GEWVeJPFkSEV5QjxLDJaL6ibHLSZ02TIcve0ocPXrdTVqGGbqAmh5Mw9V7504dlEiatSvnyibibHCrVQO2GEYsJicPA/0?wx_fmt=jpeg',
  'http://mmbiz.qpic.cn/sz_mmbiz_png/GEWVeJPFkSHALb0g5rCc4Jf5IqDfdwhWJ43I1IvriaV5uFr9fLAuv3uxHR7DQstbIxhNXFoQEcxGzWwzQUDBd6Q/0?wx_fmt=png',
  'http://mmbiz.qpic.cn/sz_mmbiz_jpg/GEWVeJPFkSGqys4ibO2a8L9nnIgH0ibjNXfbicNbZQQYfxxUpmicQglAEYQ2btVXjOhY9gRtSTCxKvAlKFek7sRUFA/0?wx_fmt=jpeg',
  'http://mmbiz.qpic.cn/sz_mmbiz_jpg/GEWVeJPFkSH2Eic4Lt0HkZeEN08pWXTticVRgyNGgBVHMJwMtRhmB0hE4m4alSuwsBk3uBBOhdCr91bZlSFbYhFg/0?wx_fmt=jpeg',
  'http://mmbiz.qpic.cn/mmbiz_jpg/TcDuyasB5T3Eg34AYwjMw7xbEK2n01ekiaicPiaMInEMTkOQtuv1yke5KziaYF4MLia4IAbxlm0m5NxkibicFg4IZ92EA/0?wx_fmt=jpeg',
]

const newList = new Array(20).fill(0)
let count = 0;
for (let i = 0; i < newList.length; i++) {
  newList[i] = {
    idx: i+1,
    nickname: `nickname${i+1}`,
    datetime: `datetime${i+1}`,
    last_content: `內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容`,
    head_img_url: imgUrlList[(count++) % 5],
  }
}

Page({
  onShareAppMessage() {
    return {
      title: '熱門文章',
      path: '../article/article'
    }
  },
  data: {
    list:newList,
  },
  rowTapped:function(e){
    console.info(e);
    var idx = e.currentTarget.id;
    wx.showToast({
      title: '當(dāng)前id為：' + idx,
    })
  },
  onLoad(options){

  },
})

一個小小的列表項目到這里就結(jié)束了，隨筆記錄，不喜勿噴。