小程序 列表

原创 2018年04月16日 23:46:13

列表组件 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,

        })

      }
    })

}


})

wxxml代码

.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;
}
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_30211165/article/details/79968634

软件工程杂志《非程序员》第一期

软件工程杂志《非程序员》第一期名    称: 《非程序员》第一期设    计: UMLCHINA编    者: UMLCHINA联系邮件: think@umlchina.com 版    本: 第一期...
  • dbbdggdbbdgg
  • dbbdggdbbdgg
  • 2001-05-27 12:05:00
  • 687

微信小程序选项卡数组列表单项选择切换效果

这里展示一个工作中用到的微信小程序的单选选项卡切换效果的制作方法效果如图:wxml:...
  • anLazyAnt
  • anLazyAnt
  • 2017-05-18 15:35:28
  • 1961

微信小程序demo汇总

1 :http://javascript.ctolib.com/categories/javascript-wechat-weapp.html 2:http:...
  • li734462972
  • li734462972
  • 2016-10-05 14:55:53
  • 1385

微信小程序下拉菜单实例

微信小程序下拉菜单思路与步骤: 布局方面,整体使用dl来写,二级包在dd中,用ul li来写;交互方面,点击某一级菜单,关闭兄弟子菜单,点击某子菜单关闭所有菜单。 1.使用dt做出第一级菜...
  • yelin042
  • yelin042
  • 2017-06-07 15:32:19
  • 5875

我心中的微信小程序 韩俊强的博客

最近几个月一直热火朝天张小龙最近要把应用折叠到微信里,这些应用被他称为:小程序。每日更新关注:http://weibo.com/hanjunqiang 新浪微博!iOS开发者交流QQ群: 44631...
  • qq_31810357
  • qq_31810357
  • 2016-11-16 09:23:25
  • 16213

Jquery和JS获取ul中li标签

js 获取元素下面所有的li  var content=document.getElementById("content"); var items=content.getElementsByT...
  • zgmu
  • zgmu
  • 2017-09-21 16:39:28
  • 250

DOM对象的小程序

制作一个表格,显示班级的学生信息。 要求: 1. 鼠标移到不同行上时背景色改为色值为 #f2f2f2,移开鼠标时则恢复为原背景色 #fff 2. 点击添加按钮,能动态在最后添加一行 3. 点击...
  • Qcherlsh
  • Qcherlsh
  • 2015-07-28 21:03:23
  • 371

列表

Android源码大全2G(安卓开发必备) 阅读:8147次   时间:2014-08-13 09:57:17   字体:[大 中 小] 源码目录:...
  • qq906786621
  • qq906786621
  • 2015-09-09 11:45:11
  • 1055

小程序的下拉刷新与上划加载

1.获取页面的值 手机端页面使用如下代码:   姓名:{{item.name}} 作物:{{item.crop}} 类型:{{item.operation_type}} ...
  • yongshuai185
  • yongshuai185
  • 2017-01-24 10:00:23
  • 2170

小程序文档整理之 -- 组件

视图容器 view - 视图容器 scroll-view - 可滚动视图区域 swiper movable-view cover-view 基础内容 icon text rich-text pr...
  • bobobocai
  • bobobocai
  • 2017-08-25 17:52:29
  • 983
收藏助手
不良信息举报
您举报文章:小程序 列表
举报原因:
原因补充:

(最多只允许输入30个字)