uni-app 实现轮播图（完整版）

先来张效果图吧

代码不多，也不难，这里直接上代码了，复制就可以用

<template><view class="content"><!-- 轮播图 --><swiper class="image-container" previous-margin="45rpx" next-margin="45rpx" circular autoplay @change="swiperChange"><swiper-item :class="currentIndex == index ? 'swiper-item' : 'swiper-item-side'" v-for="(item, index) in imgList" :key="index" lazy-load :style="dontFirstAnimation ? 'animation: none;' : ''"><view class="item" :class="currentIndex == index ? 'item-img' : 'item-img-side'"><view class="item_1"><image class="image" :src="item.image || errorImage" mode=""></image><view class="item_1-right">{{item.name}}<text class="item_1-post">{{item.post}}</text><view class="item_1-site">{{item.site}}</view></view></view><view class="item_2" :style="{'bottom': currentIndex == index? '38rpx': '20rpx'}"><view class="item_2-left">满意度<text class="item-highlight">99%</text></view><view class="item_2-right">累计咨询<text class="item-highlight">9999</text></view></view></view></swiper-item></swiper></view>
</template><script>export default {data() {return {errorImage: this.$mAssetsPath.errorImage,imgList: [{name: '茉莉',site: '中原区第一人民医院',post: '神经内科·主任医师',image: ''}, {name: '茉莉',site: '中原区第一人民医院',post: '神经内科·主任医师',image: ''}, {name: '茉莉',site: '中原区第一人民医院',post: '神经内科·主任医师',image: ''}],currentIndex: 0,dontFirstAnimation: true}},methods: {swiperChange(e) {this.dontFirstAnimation = falsethis.currentIndex = e.detail.current},}}
</script><style lang="scss" scoped>.content {// 轮播图.image-container {width: 750rpx;height: 320rpx;}.item {background: linear-gradient(44deg, #FFCC8F, #FFA657);position: relative;}.image {width: 116rpx;height: 116rpx;border-radius: 50%;border: 2rpx solid #FFFFFF;}.item_1 {display: flex;align-items: center;margin: 30rpx;}.item_1-right {font-size: 36rpx;font-weight: bold;margin-left: 20rpx;padding-top: 10rpx;}.item_1-post {font-size: 24rpx;margin-left: 16rpx;}.item_1-site {font-size: 24rpx;opacity: .6;margin-top: 20rpx;}.item-img {width: 630rpx;height: 240rpx;border-radius: 14rpx;animation: to-big .3s;box-shadow: 5rpx 10rpx 10rpx rgba($color: #FFAB5E, $alpha: .4);}.item_2 {width: 100%;display: flex;align-items: center;justify-content: flex-end;position: absolute;font-size: 24rpx;font-weight: bold;}.item_2-left {margin-right: 48rpx;}.item_2-right {margin-right: 102rpx;}.item-highlight {font-size: 32rpx;color: #0072EB;margin-left: 10rpx;}.swiper-item {width: 630rpx;height: 240rpx;display: flex;justify-content: center;align-items: center;}.item-img-side {width: 630rpx;height: 208rpx;border-radius: 14rpx;animation: to-mini .3s;}.swiper-item-side {width: 630rpx;height: 208rpx;display: flex;justify-content: center;align-items: center;}@keyframes to-mini{from {height: 240rpx;}to {height: 208rpx;}}@keyframes to-big{from {height: 208rpx;}to {height: 240rpx;}}}
</style>

如果对你有用，关注一下博主的小程序，登录一下给予支持，以后有什么开源好用的源码都会上传到小程序

uni-app 实现轮播图（完整版）相关推荐

vue实现轮播图完整版，锁定图片元素纵横比
代码 (1)代码使用 Element官网Carousel 走马灯完成,自己加了一个自动根据页面锁定图片纵横比的功能. (2)imageUrl中的src改成自己的图片路径. <template&g ...
uni-app 开发APP 自定义轮播图 swiper 指示点位置和样式
本文介绍一种简单的方法:深度作用选择器 /deep/ *很多评论说没有效果,于是重新看了一下自己的代码,发现不是自己代码问题,所以请你们先仔细看看自己的代码再来评论. <swiper class ...
CSS——网易云音乐首页之轮播图的实现（完整版）
文章目录前言一.结构的分析二.使用步骤 1.HTML结构 2.CSS样式总结前言本文主要介绍的是网易云音乐首页之轮播图的实现,细心的小伙伴会发现,之前有发过网易轮播图的制作方法,但并没有完 ...
安卓仿手机网易新闻app项目开发系列之（二）轮播图显示和RecyclerView适配器编写
一.项目简介和思路接着上周项目继续,上周主要实现了tablayout的标题栏界面和屏幕切换效果.这次咱们来实现给屏幕页面填充些网页图片数据.看看大致效果图: 可以看出界面有两部分构成,上面是轮播图, ...
viewpager 的工具类，内置多种指示器，能够帮你快速完成，轮播图，app 引导页，viewpager 的 tab 指示器等等
ViewPagerHelper 项目地址:LillteZheng/ViewPagerHelper 简介:这是一个,viewpager 的工具类,内置多种指示器,能够帮你快速完成,轮播图,app 引导 ...
短视频app源码出售swiper.js制作酷炫轮播图
html <html lang="en"><head><meta charset="utf-8"><title> ...
uni-app 小程序项目三 1. 商品列表、过滤器、封装商品item组件、上拉加载、节流阀、下拉刷新、2. 商品详情、轮播图、商品价格闪烁问题 3.加入购物车、vuex、持久化存储、mixiins
1.0 创建 goodslist 分支 1.1 定义请求参数对象为了方便发起请求获取商品列表的数据,我们要根据接口的要求,事先定义一个请求参数对象: data() {return {// 请求参数对 ...
02-vue(轮播图,v-bind对象用法,v-for指令,v-if指令,v-else-if,v-else指令,key值的基本使用,v-show指令,英雄搜索案例)
01-作业-轮播图 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
轮播图最后一张图结束如何平缓回到第一张_产品经理早期如何学习？
关于这个问题,多数同学学习的目的是就业,大学里面也没有产品经理专业,所以不会去考学分,也不需要考证,更不需要考研.产品经理是一个职位,我们学习的目的是如何能够用所学到的能力去就业,去工作.如果达到工作 ...

uni-app 实现轮播图（完整版）

uni-app 实现轮播图（完整版）相关推荐

最新文章

热门文章