playlist组件

新建components目录，并在其目录下新建playlist目录，然后右键 - 新建Component，输入playlist，自动为我们创建了playlist组件。

playlist组件如下：

playlist.wxml:

<view class="playlist-container" bind:tap="goToMusiclist"><image src="{{playlist.picUrl}}" class="playlist-img"></image><text class="playlist-playcount">{{playlist.playCount}}</text><view class="playlist-name">{{playlist.name}}</view>
</view>

playlist.wxss：

.playlist-container {width: 220rpx;position: relative;padding-bottom: 20rpx;
}.playlist-img {width: 100%;height: 220rpx;border-radius: 6rpx;
}.playlist-playcount {font-size: 24rpx;color: #fff;text-shadow: 1px 0 0 rgba(0, 0, 0, 0.15);position: absolute;right: 10rpx;top: 4rpx;padding-left: 26rpx;background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMiAyMCI+PGcgb3BhY2l0eT0iLjE1Ij48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiMwNDAwMDAiIGQ9Im0yMiAxNi43NzdjMCAxLjIzMy0xLjEyMSAyLjIzMy0yLjUwNiAyLjIzMy0xLjM4NCAwLTIuNTA2LTEtMi41MDYtMi4yMzN2LTIuNTUzYzAtMS4yMzQgMS4xMjItMi4yMzMgMi41MDYtMi4yMzMuMTc0IDAgLjM0My4wMTcuNTA2LjA0NnYtMS4zN2gtLjAzM2MuMDE3LS4yMi4wMzMtLjQ0MS4wMzMtLjY2NiAwLTQuNDE4LTMuNTgyLTgtOC04LTQuNDE4IDAtOCAzLjU4Mi04IDggMCAuMjI1LjAxNi40NDYuMDM0LjY2NmgtLjAzNHYxLjM3Yy4xNjMtLjAyOS4zMzMtLjA0Ni41MDUtLjA0NiAxLjM4NCAwIDIuNTA2Ljk5OSAyLjUwNiAyLjIzM3YyLjU1M2MwIDEuMjMzLTEuMTIyIDIuMjMzLTIuNTA2IDIuMjMzcy0yLjUwNS0uOTk5LTIuNTA1LTIuMjMzdi0yLjU1M2MwLS4yNTguMDU5LS41MDEuMTQ4LS43My0uMDg1LS4xNDgtLjE0OC0uMzEtLjE0OC0uNDkzdi0yLjY2N2MwLS4wMjMuMDEyLS4wNDMuMDEzLS4wNjctLjAwNC0uMDg4LS4wMTMtLjE3Ni0uMDEzLS4yNjYgMC01LjUyMyA0LjQ3Ny0xMCAxMC0xMCA1LjUyMyAwIDEwIDQuNDc3IDEwIDEwIDAgLjA5LS4wMDkuMTc4LS4wMTQuMjY2LjAwMi4wMjQuMDE0LjA0NC4wMTQuMDY3djJjMCAuMzA2LS4xNDUuNTY5LS4zNi43NTMuMjI0LjMzNC4zNi43Mi4zNiAxLjEzOHYyLjU1MiIvPjwvZz48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiNmZmYiIGQ9Im0yMCAxNi43NzdjMCAxLjIzMy0xLjEyMSAyLjIzMy0yLjUwNiAyLjIzMy0xLjM4NCAwLTIuNTA2LTEtMi41MDYtMi4yMzN2LTIuNTUzYzAtMS4yMzQgMS4xMjItMi4yMzMgMi41MDYtMi4yMzMuMTc0IDAgLjM0My4wMTcuNTA2LjA0NnYtMS4zN2gtLjAzM2MuMDE3LS4yMi4wMzMtLjQ0MS4wMzMtLjY2NiAwLTQuNDE4LTMuNTgyLTgtOC04LTQuNDE4IDAtOCAzLjU4Mi04IDggMCAuMjI1LjAxNi40NDYuMDM0LjY2NmgtLjAzNHYxLjM3Yy4xNjMtLjAyOS4zMzMtLjA0Ni41MDUtLjA0NiAxLjM4NCAwIDIuNTA2Ljk5OSAyLjUwNiAyLjIzM3YyLjU1M2MwIDEuMjMzLTEuMTIyIDIuMjMzLTIuNTA2IDIuMjMzcy0yLjUwNS0uOTk5LTIuNTA1LTIuMjMzdi0yLjU1M2MwLS4yNTguMDU5LS41MDEuMTQ4LS43My0uMDg1LS4xNDgtLjE0OC0uMzEtLjE0OC0uNDkzdi0yLjY2N2MwLS4wMjMuMDEyLS4wNDMuMDEzLS4wNjctLjAwNC0uMDg4LS4wMTMtLjE3Ni0uMDEzLS4yNjYgMC01LjUyMyA0LjQ3Ny0xMCAxMC0xMCA1LjUyMyAwIDEwIDQuNDc3IDEwIDEwIDAgLjA5LS4wMDkuMTc4LS4wMTQuMjY2LjAwMi4wMjQuMDE0LjA0NC4wMTQuMDY3djJjMCAuMzA2LS4xNDUuNTY5LS4zNi43NTMuMjI0LjMzNC4zNi43Mi4zNiAxLjEzOHYyLjU1MiIvPjwvc3ZnPg==) no-repeat 0 8rpx/22rpx 20rpx;
}.playlist-name {font-size: 26rpx;line-height: 1.2;padding: 2px 0 0 6px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;
}

Iconfont-阿里巴巴矢量图标库

在线图片转Base64编码

Component({/*** 组件的属性列表*/properties: {// 要接收的数据的名称// playlist:{//   // type  要接收的数据的类型 //   type:Object,//   // value  默认值//   value:""// }playlist: {type: Object,}},...

这里接收从demo中传入给组件的歌单信息，type是Object类型。

使用组件

demo.json:

{"usingComponents": {"x-playlist": "/components/playlist/playlist"}
}

指定了组件的路径。

demo.js:

// pages/demo/demo.js
Page({/*** 页面的初始数据*/data: {// openid: '',playlist: [{picUrl: "http://p4.music.126.net/hH30N-Lz_81-oSnjBI-Pxg==/109951164367373093.jpg?param=200y200",playCount: 990000000,name: "邓紫棋a"},{picUrl: "http://p4.music.126.net/hH30N-Lz_81-oSnjBI-Pxg==/109951164367373093.jpg?param=200y200",playCount: 99111111,name: "邓紫棋b"},{picUrl: "http://p4.music.126.net/hH30N-Lz_81-oSnjBI-Pxg==/109951164367373093.jpg?param=200y200",playCount: 992,name: "邓紫棋c"},{picUrl: "http://p4.music.126.net/hH30N-Lz_81-oSnjBI-Pxg==/109951164367373093.jpg?param=200y200",playCount: 993,name: "邓紫棋c"},{picUrl: "http://p4.music.126.net/hH30N-Lz_81-oSnjBI-Pxg==/109951164367373093.jpg?param=200y200",playCount: 994,name: "邓紫棋c"},{picUrl: "http://p4.music.126.net/hH30N-Lz_81-oSnjBI-Pxg==/109951164367373093.jpg?param=200y200",playCount: 995,name: "邓紫棋c"}]},...

demo.wxml:


<view class="playlist-container"><block wx:for="{{playlist}}"><!-- item数据会传入playlist组件中 --><x-playlist playlist="{{item}}"></x-playlist></block>
</view>

demo.wxss:

.playlist-container {display: flex;flex-wrap: wrap;justify-content: space-around;margin-top: 10rpx;flex-direction: row;
}.img {width: 100%;height: 100%;
}

数字格式化

observers数据监听器可以用于监听和响应任何属性和数据字段的变化，这里用于监听数字的变化。

_tranNumber方法用于数字格式化。

// components/playlist/playlist.js
Component({/*** 组件的属性列表*/properties: {playlist: {type: Object,}},observers: {['playlist.playCount'](count){this.setData({_count: this._tranNumber(count, 2)})}},.../*** 组件的方法列表*/methods: {_tranNumber(num, point) {let numStr = num.toString().split('.')[0]if (numStr.length < 6) {return numStr} else if (numStr.length >= 6 && numStr.length <= 8) {let decimal = numStr.substring(numStr.length - 4, numStr.length - 4 + point)return parseFloat(parseInt(num / 10000) + '.' + decimal) +'万'} else if (numStr.length > 8) {let decimal = numStr.substring(numStr.length - 8, numStr.length - 8 + point)return parseFloat(parseInt(num / 100000000) + '.' + decimal) + '亿'}}}
})

在playlist.wxml中使用_count:

微信小程序组件化实现歌单效果相关推荐

微信小程序 - 组件化开发
微信小程序 -- 组件化开发,总结一下开发思路及过程: 组件,类似于页面,一个自定义组件由 json wxml wxss js 4个文件组成. 1.首先,在 miniprogram 文件夹下,创建一个 ...
【腾讯Bugly干货分享】打造“微信小程序”组件化开发框架
本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:http://mp.weixin.qq.com/s/2nQzsuqq7Avgs8wsRizUhw 作者:Gc ...
微信小程序-组件化开发（上）
微信小程序(以下简称"小程序",版本)虽然默认定义了很多有用的组件,但是在开发小程序过程中,往往需要自定义业务组件. 而小程序开发者文档中却未对自定义组件给出很好的解决方案或示例. ...
微信小程序组件化的解决方案
从小程序基础库版本 1.6.3 开始,小程序支持简洁的组件化编程.查看自己使用的小程序基础库版本,可以通过在开发者工具右侧点击详情查看: 最基本的组件小程序的组件,其实就是一个目录,该目录需要包含4 ...
[微信小程序]组件化开发,以一个自定义模块框组件当做示例(附完整示例代码和效果图)
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 自定义组件我把它分为简单的三个步骤, 1.创建组件 --- 2.编写组件 --- 3.调用,使用 ...
微信小程序组件化快速实现可用模态窗
纵观现代前端框架中(不论ng react vue ) 基本四架马车声明式渲染路由组件化状态管理. 反观小程序开发环境缺失蛮多特性的好在 11月初微信团队,发布了官方的component 化 ...
微信小程序组件化开发
文章目录前言项目需求一般方式开发第一步:分析布局第二步:编写代码第三步:效果预览第四步:对比差异修改样式实现方式总结自定义组件开发第一步:新建文件夹和组件第二步:编写wxml结构 ...
微信小程序组件化开发实现导航分类文章小程序
大概是这么个回事让导航条是个 scroll-view 可以网右滑动(API自己去看即可哈) ·组件化开发组件记得开启组件属性为 true: TAB 组件的开发: 首先定义个 ...
微信小程序组件化开发框架wepy 学习（二）
2019独角兽企业重金招聘Python工程师标准>>> 文件 1.文件结构文件结构类似VUE文件扩展名为 .wpy <template><!--渲染模板对应w ...

微信小程序组件化实现歌单效果

playlist组件

使用组件

数字格式化

微信小程序组件化实现歌单效果相关推荐

最新文章

热门文章