小程序项目实战(五)

   此文章用于总结自己的知识点。有这个项目有兴趣的伙伴可以点击下方链接购买学习
小程序音乐项目开发实战-大神coderwhy新课-学习视频教程-腾讯课堂课程简介正在上传…重新上传取消https://ke.qq.com/course/4162214https://ke.qq.com/course/4162214

一、歌单组件的封装

        实现效果:

          其中header部分已经封装过了,最主要的是封装下面的item,然后再把这俩个组件整合成一个新的组件

        song-menu-area组件的index.wxml

        其中scroll-view 的scroll-x是用来设置在x轴的滑动效果

        index.wxss  white-space:实现scroll-view 在一行滚动

 

        注意点:因为我们给整个music添加了padding,当我们想实现menu-list占满整个屏幕的宽度,需要实现width:100vw, 然后再让list向左移动padding个单位像素。就可以实现list内容占满屏幕宽度

 

         index.json:注册area-header组件和即将封装的song-menu-item组件

         song-menu-item组件的封装

        index.json:接受传递过来的数据

         index.wxml

 

         index.wxss

 

 

         忘记获取数据了,再来看下数据的获取  

        api_music.js   

 

     music index.js

         组件封装完成之后 只需要传递相对应的数据 。就可以快速实现页面的布局

         music index.wxml

         组件的实现效果

二、榜单组件的封装

        实现效果:

         每个榜单可以封装成一个组件,每个组件都由榜单名称、榜单数据、图片、和播放量组成。所以获取数据的时候会给数据进行封装。而且把三个组件的数据统一放到一个对象中,以供遍历

        ranking-store.js中将数据获取并保存起来,因为这里面的数据在其他页面也会用到,所以把它存储在store中

         在music 的index.js中把三个item的数据存放在rankings中,其中以0:{}的方式存放是因为在ranking-store获取数据时不知道确定什么数据先获取到

         封装一个方法,用来将我们要展示的数据存放起来,也就是name、coverImgUrl、playCount、songList。这是一个性能的优化,也可以直接将所有数据获取并保存,然后展示只需要展示的数据

         调用方法

        将数据渲染出来，此时ranking-area-item 还没封装，下面进行封装

        rankings是一个对象,所以他的item是对象的值,index是对象的属性

 

   封装ranking-area-item组件:

        获取数据:

         index.wxml:展示数据

         index.wxss