微信小程序关于网易云音乐app轮播图效果图

LTL35

已于 2022-08-22 14:34:31 修改

阅读量708

点赞数 1

文章标签：前端微信小程序

于 2022-08-22 14:14:14 首次发布

本文链接：https://blog.csdn.net/ZHAZHAC/article/details/126464744

版权

这篇博客介绍了如何在微信小程序中实现类似网易云音乐的轮播图效果，包括背景颜色、轮播图从右边框进入、左边框消失的动画。代码示例中展示了WXML、WXSS和JS的实现方式，同时提供了获取轮播图数据的接口API调用方法。通过设置swiper组件属性和样式，实现了轮播图的自动播放、指示点和圆角图片效果。

摘要由CSDN通过智能技术生成

网易云音乐的banner图样式，其基本代码程序都可以找到，但碰到样式中的问题，预实现的样式如下：

其要实现的为轮播图+背景颜色（自己可以更改为图片等）（轮播图由右边框进入，左边框消失）

轮播图所用视图容器为swiper,具体见官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

其代码如下：

WXML：（图片地址可自己替换）

<view class="tab-list-movie" style="background: rgb(160, 57, 57);"> //rgb为背景颜色
    //banner效果图
    <swiper class="banners" indicator-dots="true" indicator-color="ivory" indicator-active- 
    color="#d43c33" autoplay="true" interval="800"  circular="true" >
      <swiper-item class="swiper-item" >
          <image src="/static/images/23400b01f80cc28fafa0ffc452d1e0e1.jpeg"></image>
      </swiper-item>
      <swiper-item class="swiper-item" >
          <image src="/static/images/41d8552cc475cd6a845c84d6a76ea333.jpeg" ></image>
      </swiper-item>
      <swiper-item class="swiper-item" >
          <image src="/static/images/5138fb34d339f7b83d3db1a47ff25211.jpeg" ></image>
      </swiper-item>
    </swiper>
</view>

WXSS：

.tab-list-movie{
  height: 400rpx;
}

.banners {
  padding-top: 50rpx;
}

.swiper-item{
  display: flex;
  justify-content: center;
  height: 100%;
  align-items: center;
}

.banners image {
  height: 100%;
  width: 650rpx;
  border-radius: 20rpx;
  justify-content: center;
  align-items:center;
}

ps:接口api需要js，wxml也需要替换部分

需要调用网易云banner接口代码如下：

WXML：

   <!-- 轮播图区域 -->
    <view class="tab-list-movie" style="background: rgb(255, 255, 255);">
      <swiper class="banners" indicator-dots="true" indicator-color="ivory" indicator- 
       active-color="#d43c33" autoplay="true" interval="2500"  circular="true" >
        <swiper-item class="swiper-item" wx:for="{{bannerList}}" wx:key="bannerId">
           <image src="{{item.pic}}" ></image>
        </swiper-item>
      </swiper>
    </view>

WXSS：（如上）

JS：

import request from '../../utils/request'

Page({
data: {
     bannerList:[],//轮播图数据，初始化
      },

onLoad: async function (options) {
      //获取轮播图数据
      let bannerListData = await request('/banner', {type: 2});
      this.setData({
        bannerList: bannerListData.banners
      })
    },
})

需创建utils里两个文件夹config.js(配置服务器相关信息)和request.js(发送ajax请求)

config.js

export default{
  host: 'http://localhost:3000',
  mobilehost: 'http://jp84w8.natappfree.cc'
}

request.js

import config from './config'
export default (url, data={}, method='GET') => {
  return new Promise((resolve, reject) => {
    wx.request({
      url: config.mobilehost + url ,
      data,
      method,
      success: (res) => {
         console.log('请求成功', res);
         resolve(res.data);
       },
      fail: (err) => {
         console.log('请求失败', err);
      reject(err);
       }
    })
  })
}