小程序普通列表的实现

来源：https://www.jianshu.com/p/44b07a86c8ff

 

在小程序中页面中的列表是最基本的实现，让我们用一个小实例来写一下吧。
效果图如下：

 

 

 

本实例的图是小程序官方的〜 ^_〜

 

小实例主要 view 及 wx:for 配合实现的，页面布局用了一些布局属性，对于我这个小白新手来讲真的写出来费了不少劲，其次是查资料实现了列表的点击事件。

实现方法：
1、在小程序页面对应的.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、在小程序页面对应的.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;
}
/*文字主体内套*/
.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、在小程序页面对应的.json文件中我没有没有代码的。
4、在小程序页面对应的.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: `内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容`,
    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: '当前id为：' + idx,
    })
  },
  onLoad(options){

  },
})