音乐列表间隙

src/music.js

@@ -25,33 +25,21 @@ export default class MusicList {
         this.ul = List({
             classList: ['music-list'],
             style: {
-                flex: 1,
+                flex: 1,                  // 防止在flex中被挤压变形
-                textOverflow: 'ellipsis',
+                textOverflow: 'ellipsis', // 文本溢出时省略号
-                whiteSpace: 'nowrap',
+                whiteSpace: 'nowrap',     // 不换行
-                overflowX: 'hidden', // 溢出时隐藏
+                overflowX: 'hidden',      // 溢出时隐藏
-                overflowY: 'auto',   // 溢出时显示滚动条
+                overflowY: 'auto',        // 溢出时显示滚动条
-                listStyle: 'disc',   // 实心圆
+                listStyle: 'disc',        // 实心圆
-                padding: '0 1.1rem', // 列表左右留白
+                padding: '0 1.1rem',      // 列表左右留白
+                gap: '.1rem',             // 列表项间隔
+                display: 'flex',          // 列表垂直排列
+                flexDirection: 'column',  // 列表垂直排列
             }
         })
         this.EventListeners = EventListeners
         this.list = []
         list.forEach(item => this.add(item)) // 列表逐一添加
-
-        //this.封面 = Img({
-        //    src: 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7',
-        //    style: {
-        //        width: '6rem',
-        //        height: '6rem',
-        //        borderRadius: '1rem',
-        //        backgroundColor: '#eee',
-        //        border: 'none',
-        //    },
-        //    onerror: event => {
-        //        // img 标签错误时, 替换为1x1透明gif图片
-        //        event.target.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
-        //    }
-        //})
         this.封面 = createElement({
             style: {
                 width: '6rem',