微信小程序中的列表渲染
文章目录
- 小程序项目
- app.json
- pages/index/index.wxml
- pages/index/index.wxss
- pages/index/index.js
- 小结
- 相关链接
小程序项目
代码涉及的主要文件有:
- app.json
- pages/index/index.wxml
- pages/index/index.wxss
- pages/index/index.js
app.json
{"pages": ["pages/index/index"],"window": {"navigationBarBackgroundColor": "#971a22","navigationBarTitleText": "首页","navigationBarTextStyle": "white"},"style": "v2","sitemapLocation": "sitemap.json"
}
pages/index/index.wxml
<view class="container"><swiper class="bannerContainer" autoplay indicator-dots indicator-color="#971a22" indicator-active-color="ivory"><swiper-item wx:for="{{bannerList}}" wx:key="id"><image src="{{item.pic}}"></image></swiper-item></swiper><scroll-view class="recommendList" enable-flex scroll-x><view class="recommendItem" wx:for="{{recommendList}}" wx:key="id"><image src="{{item.picUrl}}"></image><view class="title">{{item.title}}</view></view></scroll-view>
</view>
pages/index/index.wxss
.bannerContainer image{width: 100%;height: 300rpx;
}
.recommendList{display: flex;padding: 20rpx;
}
.recommendList image{width: 200rpx;height: 200rpx;border-radius: 10rpx;margin-right: 10rpx;
}
.recommendList .title{font-size: 26rpx;display: -webkit-box;overflow: hidden;text-overflow:ellipsis;-webkit-box-orient: vertical;-webkit-line-clamp: 2;
}
pages/index/index.js
Page({data:{bannerList:[],recommendList:[]},onLoad(){this.getBannerList();this.getRecommendList();},getBannerList(){const result = [{pic: "http://p1.music.126.net/N-7H0QxkjcnqNfQo7Prx9g==/109951167582698387.jpg", id: 146917329},{pic: "http://p1.music.126.net/CRkjYtGzVn927GVZFNcykQ==/109951167582707134.jpg", id: 146972047},{pic: "http://p1.music.126.net/UCpvQwegTjx-_ecHDDrViQ==/109951167583920308.jpg", id: 1958588078},{pic: "http://p1.music.126.net/5hxwliN1A-ocfo1y8Rl-LA==/109951167583325800.jpg", id: 146939174},{pic: "http://p1.music.126.net/i9A9PG9tvDqkuRekCR8EgQ==/109951167583029047.jpg", id: 1957532468},{pic: "http://p1.music.126.net/es8XZbDQWrNjA_VyW7XJeQ==/109951167583025966.jpg", id: 146848766},{pic: "http://p1.music.126.net/7YCWTLNpIqzdaYD_WrB6qA==/109951167583039220.jpg", id: 146627102},{pic: "http://p1.music.126.net/u2Y1A90S5fh3R4qVhKrIGQ==/109951167582728056.jpg", id: 223052482},{pic: "http://p1.music.126.net/Jn1zsklqb_qmPfoJsooJ2Q==/109951167582726188.jpg", id: 1957961053},{pic: "http://p1.music.126.net/lsKgZUDW-4C8SRbQciZvmA==/109951167583045066.jpg", id: 1955958008}]this.setData({bannerList:result})},getRecommendList(){const result = [{id: 494479726, picUrl: "https://p2.music.126.net/58ox3zVEmosSrdLaKj6x5w==/109951162827155600.jpg", title: "后摇MV | 原来后摇也能视觉化"},{id: 135595185, picUrl: "https://p2.music.126.net/11ZHf0G9FQzWNi-8sFzCmw==/109951164541050373.jpg", title: "Acid Jazz酸爵士—爵士乐中的“酸性”融合"},{id: 114846926, picUrl: "https://p2.music.126.net/GTf1b1G2dAs1SleurIfcJg==/3399689953594431.jpg", title: "歌名后缀大科普"},{id: 113780871, picUrl: "https://p2.music.126.net/qxUWSKhrd1UWME8oAYTMFQ==/109951164497486331.jpg", title: "「Cool Jazz」冷爵士让你全身心放松"},{id: 2962407224, picUrl: "https://p2.music.126.net/NW1GEN3sruiLpT4AZrdDFw==/109951165669533032.jpg", title: "『英伦女声』遗世而独立的不列颠玫瑰"},{id: 2107922801, picUrl: "https://p2.music.126.net/b--QkIcFfdxz_DryW55ZfA==/109951163165101034.jpg", title: "声光美学 I 经典电影中的古典配乐集"},{id: 78669437, picUrl: "https://p2.music.126.net/AfN_yyi-fQe8POTMKJFjAA==/7957165650297535.jpg", title: "美剧中的神级插曲"},{id: 3116763088, picUrl: "https://p2.music.126.net/MSom1XSXqt5K9ArZlJ29CQ==/109951164608648583.jpg", title: "音乐的力量 I 文艺复兴时期的世俗情歌"},{id: 101354498, picUrl: "https://p2.music.126.net/dmj9iqz8MsD_sCd1xBF0WA==/7918682744429845.jpg", title: "时尚运动•必备节奏"},{id: 739403485, picUrl: "https://p2.music.126.net/RPilW2ADtU91CK3qkVPizA==/18720284976441185.jpg", title: "弦外有声——活力小提琴"}]this.setData({recommendList:result})}
})
小结
记住四个指令就行:
wx:for
,绑定一个数组。wx:key
。唯一的字符串或数值。要么是数组元素item的某个属性,要么是*this
(此时,item本身是一个唯一的字符串或数值)。wx:for-item
。默认数组当前元素的变量名为item
,可以使用wx:for-item
重新指定当前元素的变量名。wx:for-index
。默认数组当前元素的下标变量名为index
,可以使用wx:for-index
重新指定当前元素的下标变量名。
相关链接
【微信小程序】wxml模板
微信小程序中的列表渲染相关推荐
- 微信小程序入门教程---列表渲染多层嵌套循环及wx:key的使用(双层for循环)
前言 入门教程之列表渲染多层嵌套循环,目前官方的文档里,主要是一维数组列表渲染的案例,还是比较简单单一,给刚入门的童鞋还是无从入手的感觉. <view wx:for="{{items} ...
- 微信小程序中商品列表 不显示
在做这个商品列表的时候不显示图片,这是我在网上找的一个案例,把它的样式复制过来后不显示,经过查找是根目录的 这个种的continer跟他的样式重叠改成 就好了,如果需要这个功能的这个项目地址(仿美团) ...
- 微信小程序 如何实现列表
微信小程序中实现列表可以通过使用「scroll-view」组件或「list」组件来实现. 使用「scroll-view」组件:可以使用 wx:for 指令来循环渲染列表中的数据,并为每个元素设置相应的 ...
- 微信小程序快速建立列表
如何在微信小程序中建立列表,并且实现列表项的动态增添,点击某一列表项实现界面的跳转,可以通过navigator组件进行表示. wxml文件 <view class="box" ...
- 微信小程序中嵌套html_在微信小程序中渲染HTML内容3种解决方案及分析与问题解决...
大部分Web应用的富文本内容都是以HTML字符串的形式存储的,通过HTML文档去展示HTML内容自然没有问题.但是,在微信小程序(下文简称为「小程序」)中,应当如何渲染这部分内容呢? 在微信小程序中渲 ...
- 微信小程序显示分页列表
目录 微信小程序创建项目配置底部导航栏 微信小程序滚动播放内容 微信小程序功能中心模块开发 微信小程序个人中心页面开发 微信小程序获取电话号码 微信小程序显示列表数据 微信小程序显示分页列表 微信小程 ...
- 室内定位——如何在微信小程序中获取Beacon的RSSI值
前言:本文使用的Beacon是智石科技的Smart Beacon,手机的操作系统是Android,其中实现室内定位最重要的参数是Beacon发射的蓝牙信号中的RSSI值.废话不多说,请看下面分解. ...
- Canvas 动画引擎解析与微信小程序中的应用
点击观看大咖分享 抗击疫情,腾讯云在行动.在开发微信小程序的过程中,我们经常需要展现一些图形和图表.目前市面上有好几款常用的图形库,在这些图形库的底层都有渲染引擎在支撑. ZRender 是其中一款非 ...
- 手把手教你开发微信小程序中的插件
继上次 手把手教你实现微信小程序中的自定义组件 已经有一段时间了(不了解的小伙伴建议去看看,因为插件很多内容跟组件相似),今年3月13日,小程序新增了 小程序**「插件」 功能,以及开发者工具新增 「 ...
- 微信小程序中通过flex实现网格布局(一)
这篇文章主要是通过flex布局实现网格布局. 准备知识: 数组的undefined的问题 一般来说,网格布局是特殊的列表,后台返回的数据是一维数组.而我们通常使用wx:for的方式将数据填充进去.数据 ...
最新文章
- Linux 系统修复
- 使用Javascript制作连续滚动字幕
- AI已经会刷LeetCode了
- Python: sklearn库——数据预处理
- 数据结构--队列(链表实现)
- Windows环境 和 Linux环境下搭建Qt开发环境
- 从零打造在线网盘系统之Hibernate查询与更新技术
- iPhone编程的一些技巧总结
- 安兔兔跑分可信吗_安兔兔安卓手机跑分性能榜公布:第一名实至名归?
- 《MySQL——group by使用tips》
- 08-图7 公路村村通 (30 分
- Linux 切mms数据流,libmms MMSH Server响应解析缓冲区溢出漏洞
- 智慧环保检测平台Axure原型图
- 金仓数据库 KingbaseES 插件参考手册 sys_qualstats
- 吴军长文讲解算力:全球算力竞争中我们要做的三件事
- STP生成树算法广播风暴的产生
- 太难了!关于程序员的43个梗,你知道多少呢
- 2023:软件测试的是不是没前景了?自学软件测试要学哪些内容?
- 【U8】填制凭证输入完摘要,回车后报错运行时错误70,拒绝的权限。
- 现在建网站你会选择自己建站还是在线建站平台?