Vue3中点击箭头切换图片

效果:

切换前

点击右侧的按钮,切换后

没有动画,可以展示图片的切换,可以考虑计算属性computed(过滤一下index,如果为0就是显示前5张图片,如果为1显示后5张图片,computed根据index的不同而实时更新,显示页面也就有不同)

<template><HomePanel title="热门品牌" sub-title="国际经典 品质保证"><template v-slot:right><!-- 右侧的滑动箭头 --><ahref="javascript:;"@click="index = 0":class="{ disabled: index === 0 }"class="iconfont icon-angle-left prev"></a><ahref="javascript:;"@click="index = 1":class="{ disabled: index === 1 }"class="iconfont icon-angle-right next"></a></template><div class="box" ref="box"><ul class="list"><!-- 图片列表,10张是为了可以滑动 --><!-- 遍历result是显示了所有的图片,一半图片隐藏了,list是根据index只展示当前的数据 --><li v-for="item in list" :key="item.id"><RouterLink to="/"><img :src="item.picture" alt="" /></RouterLink></li></ul></div></HomePanel>
</template>以上是模板部分,下方是scriptsetup(){
const list = computed(() => {// result.value是因为在hook中result初始值设置为了const result = ref([]) 因为使用了ref所以需要用.valuereturn result.value.filter((item, i) => {if (index.value === 0) {return i < 5} else if (index.value === 1) {return i > 4}
return{list}
}

有动画的时候,就不能使用list,需要使用全部的数据result进行遍历

<ul class="list" v-if="result.length" :style="{ transform: `translateX(${-index * 1240}px)` }">// style样式使用了css3的动画 index等于0的时候,就不用位移 ,如果index = 1 就向左位移一个版心的距离

全部代码:(此代码中增加了骨架屏及他的动画效果)

<template><HomePanel title="热门品牌" sub-title="国际经典 品质保证" ref="target"><template v-slot:right><!-- 右侧的滑动箭头 --><ahref="javascript:;"@click="index = 0":class="{ disabled: index === 0 }"class="iconfont icon-angle-left prev"></a><ahref="javascript:;"@click="index = 1":class="{ disabled: index === 1 }"class="iconfont icon-angle-right next"></a></template><div class="box" ref="box"><!-- 有数据的时候 --><transition name="fade"><ul class="list" v-if="result.length" :style="{ transform: `translateX(${-index * 1240}px)` }"><!-- 图片列表,10张是为了可以滑动 --><!-- 遍历result是显示了所有的图片,一半图片隐藏了,list是根据index只展示当前的数据 --><li v-for="item in result" :key="item.id"><RouterLink to="/"><img :src="item.picture" alt="" /></RouterLink></li></ul><!-- 没有数据的时候显示骨架屏 --><div class="skeleton" v-else><XtxSkeletonclass="item"v-for="i in 5":key="i"animatedbg="#e4e4e4"width="240px"height="305px"></XtxSkeleton></div></transition></div></HomePanel>
</template><script>
import HomePanel from './home-pannel'
import { findBrand } from '@/api/home.js'
import { useLazyData } from '@/hooks'
import { ref, computed } from 'vue'
export default {name: 'HomeBrand',components: { HomePanel },setup() {// 直接使用的是数据懒加载(hook中定义的函数中limit= 5,而现在需要传值为10使用了箭头函数)const { result, target } = useLazyData(() => findBrand(10))// index的初始值设置为0 index只有0和1const index = ref(0)// 通过计算属性计算const list = computed(() => {// result.value是因为在hook中result初始值设置为了const result = ref([]) 因为使用了ref所以需要用.valuereturn result.value.filter((item, i) => {if (index.value === 0) {return i < 5} else if (index.value === 1) {return i > 4}})})return { result, target, index, list }}
}
</script><style scoped lang="less">
.skeleton {width: 100%;display: flex;.item {margin-right: 10px;&:nth-child(5n) {margin-right: 0;}}
}
.home-panel {background: #f5f5f5;
}
.iconfont {width: 20px;height: 20px;background: #ccc;color: #fff;display: inline-block;text-align: center;margin-left: 5px;background: @xtxColor;&::before {font-size: 12px;position: relative;top: -2px;}&.disabled {background: #ccc;cursor: not-allowed;}
}
.box {display: flex;width: 100%;height: 345px;overflow: hidden;padding-bottom: 40px;.list {width: 200%;display: flex;transition: all 1s;li {margin-right: 10px;width: 240px;&:nth-child(5n) {margin-right: 0;}img {width: 240px;height: 305px;}}}
}
</style>

Vue3中点击箭头切换图片相关推荐

vue中点击按钮切换图片
vue中点击按钮切换图片直接附上代码,亲测有效  <template><div><div class="">< ...
vue点击按钮怎么跳转图片_Vue中点击按钮切换图片;
页面效果比较差,但是有图总比没图强点这是最开始的页面,我们看到,图中只有一个"右箭头",点击右箭头; 左箭头也有了,然后我们继续点击右箭头; 右箭头没有了,只剩下了左箭头, 以上 ...
js中点击按钮切换图片
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title ...
JQuery实现点击按钮切换图片(附源码)--JQuery基础
JQuery实现切换图片相对比较简单,直接贴代码了哈,有注释噢!疑问请追加评论哈,不足之处还请大佬们指出! 1.案例代码: demo.html: <!DOCTYPE html> <h ...
Android 点击按钮切换图片
Android 点击按钮切换图片效果如图: 点击后: 主要代码: //切换图片 but1.setBackgroundResource(R.drawable.qq1); 全部代码: public cl ...
js实现点击按钮切换图片功能_☆*往事随風*☆的博客
文章目录前言一.DOM是什么? 二.对象的HTML DOM 树三.图片切换练习 1.要求 2.实现思路 3.示例代码 1.html示例代码如下: 2.css示例代码如下: 2.js示例代码如下: ...
js-图片的轮播-设置主要界面-和鼠标点击进行切换图片
这里使用了一个大的ul 将超出部分隐藏实现鼠标点击,控制图片的移动对超链接添加标识,控制图片和超链接的联动显示 <!DOCTYPE html> <html><head ...
jQuery箭头切换图片 - 学习笔记
jQuery箭头切换图片布局 3d位移变形原点 jQuery transform:translate3d(x,y,z): x 代表横向坐标移向量的长度 y 代表纵向坐标 ...
html点击按钮切换图片代码_SVG创意推文—『点击开窗』教程
嘿,胖友们大家好呀,我是三儿. 好久不见,胖友们有没有想我呀!最近这段时间,各大官媒齐齐出手,朝着SVG创意推文进军.之前人民日报推了一篇<点亮武汉>在当时引起了不小的轰动,三儿也连忙出了 ...
基于html+js实现轮播图（自动轮播、左右按钮、小圆点点击及切换图片）
使用html和js实现的一个简单小练习轮播图.大概功能主要是: 1.使用时间函数自动切换图片: 2.在图片及按钮及小圆点的父节点身上绑定事件代理,添加mouseenter及mouseleave事件类型 ...

Vue3中点击箭头切换图片

Vue3中点击箭头切换图片相关推荐

最新文章

热门文章