使用async/await请求数据

使用then请求数据

fetchMusicBanner(){
    getMusicBanner().then((res) => {
        this.setData({ banners:res.banners })
    })
}

使用async/await请求数据

async fetchMusicBanner(){
    const res = await getMusicBanner();
    this.setData({
      banners:res.banners
})
},
//这个更加易读

swper的高度与照片高度相等

封装节点信息获取访问

//async还是不能完全替代Promise
export default function querySelect(selectorName){
  return new Promise((resolve,reject) => {
    const query = wx.createSelectorQuery();
    query.select(selectorName).boundingClientRect();
    query.exec(res => {
      resolve(res);
    })
  })
}

加了层节流然后动态修改swiper高度

querySelectThrottle(".image-item")?.then((res) => {
      this.setData({
        bannerHeight:res[0].height
      })
})

使用flex左右固定中间自适应使用

.container{
    display:flex;
    align-item:center;
}
.middle{
    flex:1;
}

下拉刷新

onPullDownRefresh() {
    //数据清空
    this.setData({
      videoList: [],
    })
    this.data.hasMore = true;
    this.data.offset = 0
    //加入数据
    this.fetchTopMv().then(() => {
        完成后主动停止下拉
      wx.stopPullDownRefresh()
    })
  },

只显示两行标题的样式

  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

因为有padding的问题子节点100%

背景模糊化样式

在背景元素上面再添加一个元素并且添加样式

.bg-imag::after {
  content: "";
  z-index: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.2);
  backdrop-filter:blur(15px)
}

使用轮播图可以实现切换左右页面切换

使用flex解决子元素image自适应跃出父节点content

.album {
  flex: 5;
  display: flex;
  align-items: center;
}

中间遇到的问题

flex-shink应该放在flex布局的元素里

音乐歌词滚动无法隐藏滚动条(未解决)

下面两个方法都没法解决