×

小程序开发:小程序实现简单列表功能

作者:Web前端之家2021.06.08来源:Web前端之家浏览:342评论:0
关键词:小程序

列表组件 for只要给组件增加for一个数组那么就可以实现列表组件。

wxml代码

<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>

        <view class='timecss'>
          <text class='playcunnter'>播放次数:{{item.playtimes}}</text>
          <text class='time'>收藏:{{item.likes}}</text>
        </view>

   </view>
 </view>
 </block>

index.js代码。

Page({

  data: {
yetinglist:[],

}
//列表点击事件
  readDetail: function(e) {
    //跳转到其他页面
    wx.navigateTo({
      url: '../twoVC/twovc?id='+e.currentTarget.dataset.id
    })
   // console.log(e.currentTarget.dataset.id);
  },

//加载页面是调用之调用一次
onLoad: function () {
    var that =this;
   //网络解析
    wx.request({   url:'http://mobile.ximalaya.com/mobile/v1/album/track/ts-1499312754612?albumId=260769&device=iPhone&isAsc=true&pageId=1&pageSize=20&',
      success:function(res) {
        console.log(res.data.data.list)
         that.setData({
           yetinglist:res.data.data.list,

        })

      }
    })

}


})

CSS

.waibian{


    display: -webkit-flex; /* Safari */
    -webkit-justify-content: initial; /* Safari 6.1+ */
    display: flex;
    justify-content: initial;
}
.leftimagecss{
  margin-left: 5px;
  margin-top: 5px;
  margin-bottom: 5px;

  width:40%;
  height:110px;
  border-radius:10px;
}
.righttextcss{
  margin-left: 10px;
  height: 110px;
  width: 70%;


  flex-wrap: wrap;
  display: flex;
 align-content: Space-around;
}
.titlecss{

  height: 40px;
  width: 100%;
  margin-top: 5px;
 font-size:medium;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;


}
.nicenamecss{
  width: 100%;
  height: 30px;
  font-size:small;
  -webkit-text-fill-color: lightgray;


}
.timecss{
 height: 20px;
 width: 100%;

 display: flex;
  justify-content: space-between;
}
.playcunnter{
 font-size:small;
  -webkit-text-fill-color: blueviolet;

}
.time{
  margin-right: 10px;
  font-size:small;
  -webkit-text-fill-color: lawngreen;
}

放到软件里试试吧。

温馨提示:本文作者系Web前端之家 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/xiaochengxu20210608.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • qianduan

    这个跟H5做的很像,看上去用react实现起来要简单些。...

  • qianduan

    YYDS的文章,收藏了。...

  • 访客

    红红火火恍恍惚惚...

  • 跨境电商运营

    谢谢站长的文章已经解决问题了...

  • 跨境电商运营

    非常不错的文章下次还会再来!...

  • Web前端之家

    可以的,有时间会发些关于SEO相关的文章~...

  • s4f

    SEO很难啊,小编多发点类似文章吧!...

  • Web前端之家

    应该没什么问题吧,等待官宣,毕竟还没正式公开这个版本。...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2021 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.6.7 Valyria