シンプルなリスト機能を実装するミニプログラム

<block wx:for="{{yetinglist}}"> 
  <view class='waibian' bindtap="readDetail" data-id="{{item.title}}">
   <image src="{{item.smallLogo}}" class='leftimagecss'></image>

   <view class='righttextcss'>

     <text class='titlecss'>【ナイトリスニング】{{item.title}}</text>


    <text class='nicenamecss'>{{item.nickname}}</text>

        <ビュークラス='timecss'>
          <text class='playcunnter'>プレイ時間:{{item.playtimes}}</text>
          <text class='time'>コレクション:{{item.likes}}</text>
        </ビュー>

   </ビュー>
 </ビュー>
 </ブロック>

ページ（{

  データ： {
まだリスト:[],

}
//リストクリックイベント readDetail: function(e) {
    //他のページにジャンプ wx.navigateTo({
      url: '../twoVC/twovc?id='+e.currentTarget.dataset.id
    })
   // コンソールログ(e.currentTarget.dataset.id);
  },

//ページの読み込みは1回呼び出されます onLoad: function () {
    var that =これ;
   //ネットワーク解析 wx.request({ url:'http://mobile.ximalaya.com/mobile/v1/album/track/ts-1499312754612?albumId=260769&device=iPhone&isAsc=true&pageId=1&pageSize=20&',
      成功:function(res) {
        コンソールログ(res.data.data.list)
         that.setData({
           まだリスト:res.data.data.list、

        })

      }
    })

}


})

.ワイビアン{


    display: -webkit-flex; /* Safari */
    -webkit-justify-content: initial; /* Safari 6.1+ */
    ディスプレイ: フレックス;
    コンテンツの正当化: 初期;
}
.leftimagecss{
  左マージン: 5px;
  上マージン: 5px;
  下部マージン: 5px;

  幅:40%;
  高さ:110ピクセル;
  境界線の半径:10px;
}
.righttextcss{
  左マージン: 10px;
  高さ: 110px;
  幅: 70%;


  flex-wrap: ラップ;
  ディスプレイ: フレックス;
 align-content: スペースを空ける;
}
.titlecss{

  高さ: 40px;
  幅: 100%;
  上マージン: 5px;
 フォントサイズ:中;
  テキストオーバーフロー: -o-ellipsis-lastline;
  オーバーフロー: 非表示;
  テキストオーバーフロー: 省略記号;
  ディスプレイ: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: 垂直;


}
.nicenamecss{
  幅: 100%;
  高さ: 30px;
  フォントサイズ:小さい;
  -webkit-テキストの塗りつぶし色: ライトグレー;


}
.timecss{
 高さ: 20px;
 幅: 100%;

 ディスプレイ: フレックス;
  コンテンツの両端揃え: スペースの間;
}
.playcunnter{
 フォントサイズ:小さい;
  -webkit-テキスト塗りつぶし色: 青紫;

}
。時間{
  右マージン: 10px;
  フォントサイズ:小さい;
  -webkit-text-fill-color: 芝生の緑;
}