vant swipe 三图一屏

效果图：

需求：

老师布置作业让大伙跟着b站的一个up做一个网易云音乐首页，up用的vue-awesome-swiper做轮播图，我用的vant，在做到“发现好歌单”模块的时候发现vant没有一屏显示多图的效果，于是自己魔改了一些样式凑合一下

思路：

改轮播组件overflow: hiddle为visible，设置轮播组件的宽为三分之一屏宽，轮播组件外包裹一个大盒子overflow: hiddle

代码：

<template><div class="musicList"><div class="musicList-top"><div class="title">发现好歌单</div><div class="more">查看更多</div></div><van-swipestyle="width: 2.3rem"class="musicList-content":loop="true":show-indicators="false":autoplay="3000"><van-swipe-itemstyle="margin: 0 0.15rem"v-for="(item, key) in mList":key="key"><div class="musicList-swipe-item"><img class="item-img" :src="item.picUrl" alt="" /><p class="item-text">{{ item.name }}</p><p class="item-play-count"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-bofang1"></use></svg>{{ getPlayCount(item.playCount) }}</p></div></van-swipe-item></van-swipe></div>
</template><script>
import { defineComponent, ref, onMounted } from "vue";
import { getMusicList } from "@/service/api";export default defineComponent({setup() {let mList = ref([])const getPlayCount = (playCount) => {if (playCount >= 10000000) return (playCount / 10000000).toFixed(2) + "亿"else if (playCount >= 10000) return (playCount / 10000).toFixed(2) + "万"return playCount}onMounted(() => {getMusicList().then((res) => {mList.value = res.data.resultconsole.log(mList)});  })return {mList,getPlayCount}}
});
</script><style lang="less" scoped>
.musicList {width: 7rem;margin: 0 auto;overflow: hidden;.musicList-top {display: flex;justify-content: space-between;margin-bottom: 0.1rem;.title {font-weight: 800;}.more {border: 0.01rem solid #aaa;border-radius: 0.1rem;padding: 0.07rem;font-size: 0.2rem;}}.musicList-content {.musicList-swipe-item {position: relative;.item-img {width: 100%;border-radius: 0.1rem;height: auto;}.item-text {font-size: 0.2rem;font-weight: 500;}.item-play-count {.icon {width: 0.16rem;height: 0.16rem;fill: #ccc;margin-right: 0.05rem;}position: absolute;top: 0.2rem;right: 0.1rem;font-size: 0.16rem;color: #ccc;}}}
}
/deep/ .van-swipe {overflow: visible;width: 7.5rem;
}
</style>

总结：

这个思路比较简单，缺点是要自己慢慢调样式比较麻烦，如果加上指示器小圆点还要自己调整指示器的样式，自动轮播循环播放的时候也有bug，后面两个图会显示不出来，以后有缘再改吧！

vant swipe 三图一屏相关推荐

竖屏图片滚动html5,详解swipe使用及竖屏页面滚动方法
Swiper常用于移动端网站的内容触摸滑动 Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果 ...
Android8.1 MTK平台增加三指截屏(仿IOS左下角显示缩略图点击放大显示)
效果图修改后动画如下系统原动画如下三指截屏 PhoneWindowManager 同级目录下的 SystemGesturesPointerEventListener.java 主要负责处理界面的 ...
荣耀android手机怎么截图,荣耀30怎么截屏？荣耀30三种截屏方法
从苹果手机换荣耀30手机,但是不会截屏,想要截屏怎么办呢? 荣耀30三种截屏方法荣耀30是华为旗下荣耀的一款智能手机,于2020年4月15日发布.不过由苹果转过来的可以通过下面的方法截图. 使用组合 ...
实验三图的操作与实现
前言记录实验,同时也是记录常见数据结构算法的实现. 广州大学学生实验报告开课实验室:计算机科学与工程实验(电子楼416A) 学院计算机科学与网络工程学院实验课程数据结构实验实验项目实验三 ...
苹果xr如何截屏_苹果手机自带的三种截屏技巧，你知道几个？现在知道还不迟...
今年苹果手机发布的新机自发布以来就受到了热烈的追捧,销量一直都处于只增不减的趋势.苹果手机为何如此之火?除了本身自带的IOS系统之外,手机自带很多小技巧,你知道不?今天就来为大家介绍苹果手机中的三种截 ...
5种样式实现div容器中三图摆放实例对比说明
代码地址如下: http://www.demodashi.com/demo/11593.html 效果演示: demo点查看效果需求说明: 如下图所示为设计图,希望在图片上传无规则无规律的情况下实现 ...
滚动截屏软件_华为指关节截屏不如三指截屏好用？一步到位，实践出真知
华为手机的指关节截屏功能想必只要是用过的朋友都知道,熟悉的朋友更会以此为依赖,比如我,现在换了个其他品牌手机用,一到截屏的时候还是会不由自主地拿指关节划区截屏,因为指关节截屏不仅仅是双击截屏,这个划区 ...
css禁止背景图拉伸_html-css控制背景图全屏拉伸不重复显示
在HTML中,当我们设置背景图,只能采用是否重叠.居中.重叠方向这几个选项 CSS3中设置 body { background:#3d71b8 url(../back_main.png); backg ...
有哪些计算机软件可以录制声音,屏幕录制怎么录声音？这三个录屏软件需了解...
屏幕录制怎么录声音?这三个录屏软件需了解 2020年08月21日 15:05作者:黄页编辑:黄页分享屏幕录制怎么录声音?不管是日常的工作还是学习,都免不了与电脑打交道.经常会在电脑上浏览一些重要的 ...
扁平风轮播图大屏展示html页面源码
大家好,今天给大家介绍一款,扁平风轮播图大屏展示html页面源码(图1).送给大家哦,获取方式在本文末尾. 图1 可以点击图片区域进行图片轮播切换(图2) 图2 可以点击左右按钮进行图片轮播切换(图3 ...

vant swipe 三图一屏

vant swipe 三图一屏相关推荐

最新文章

热门文章