小程序普通列表的實現

來源：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){

  },
})