在做项目的时候需要实现手动点击按钮内容可以横向滚动以下是实现的方法templatedivclassHomedivstyledisplay: flex;height: 100%;align-items: center;div clickscrollLeft(scrollContainer1)stylewidth: 80px;text-align: center;font-size: 30px;左/divdivrefscrollContainer1styleheight: 100px;width: 1000px;display: flex;justify-content: space-between;overflow-x: auto;span v-foritem in 20stylewidth: 120px;height: 100%;display: inline-block;background: #a3a2a2;margin-right: 5px;flex-shrink: 0;{{item}}/span/divdiv clickscrollRight(scrollContainer1)stylewidth: 80px;text-align: center;font-size: 30px;右/div/div/div/templatescriptexportdefault{name:Home,data(){return{}}, methods:{scrollLeft(row1){this.$refs[row1].scrollBy({left: -600, // 每次点击滚动的距离 behavior:smooth,});}, scrollRight(row1){this.$refs[row1].scrollBy({left:600, // 每次点击滚动的距离 behavior:smooth,});},},}/script希望可以帮到你~看到这里如果对你有帮助的话就动动手机点个关注吧~点个关注不迷路~~~~
vue手动点击按钮实现内容滚动
在做项目的时候需要实现手动点击按钮内容可以横向滚动以下是实现的方法templatedivclassHomedivstyledisplay: flex;height: 100%;align-items: center;div clickscrollLeft(scrollContainer1)stylewidth: 80px;text-align: center;font-size: 30px;左/divdivrefscrollContainer1styleheight: 100px;width: 1000px;display: flex;justify-content: space-between;overflow-x: auto;span v-foritem in 20stylewidth: 120px;height: 100%;display: inline-block;background: #a3a2a2;margin-right: 5px;flex-shrink: 0;{{item}}/span/divdiv clickscrollRight(scrollContainer1)stylewidth: 80px;text-align: center;font-size: 30px;右/div/div/div/templatescriptexportdefault{name:Home,data(){return{}}, methods:{scrollLeft(row1){this.$refs[row1].scrollBy({left: -600, // 每次点击滚动的距离 behavior:smooth,});}, scrollRight(row1){this.$refs[row1].scrollBy({left:600, // 每次点击滚动的距离 behavior:smooth,});},},}/script希望可以帮到你~看到这里如果对你有帮助的话就动动手机点个关注吧~点个关注不迷路~~~~
