参考:https://www.cnblogs.com/wxyblog/p/11933929.html
在我目前的版本中 ,因为找不到 webpack.base.conf.js 所以只需要 第一步和第二部就OK了 ,试过了 OK的
1: 在终端输入命令 开始安装 jquery
npm install jquery --save
或者 npm install jquery@3.6.4 --save (指定jquery版本)
2: 在vue 页面中
import $ from 'jquery' 就可以使用jquery了
<template>
<div class="divFrame">
<div class="divTitle">
<input @click="toLeft" id="Button1" type="button" value="左移" class="btn" />
<input @click="toRight" id="Button2" type="button" value="右移" class="btn" />
</div>
<div class="divContent">
<div class="divList">
<span>菜单管理</span>
<span>日志管理</span>
<span>课件管理</span>
<span>密码修改</span>
<span>系统管理</span>
</div>
</div>
</div>
</template>
<script lang="ts">
import $ from 'jquery'
export default {
methods:{
async toLeft(){
$(".divList").animate({ left: "-=100px" }, 1000);
},
async toRight(){
$(".divList").animate({ left: "+=100px" }, 1000);
}
}
}
</script>
<style type="text/css">
body{font-size:13px}
.divFrame{border:solid 1px #666;width:168px;text-align:center;}
.divFrame .divTitle{background-color:#eee;padding:5px 0px 5px 0px}
.divFrame .divContent{width:108px;height:52px;padding:5px 0px 5px 0px;margin:0px 30px 0px 30px;overflow:hidden}
.divFrame .divContent .divList{width:600px;position:absolute}
.divFrame .divContent .divList span{border:solid 1px #ccc;background-color:#eee;width:100px;height:50px;float:left;margin-right:2px}
.btn {border:#666 1px solid;padding:2px;width:60px;filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8)}
</style>
到上面就可以使用jquey的滑动效果了,如果你还要使用 拖拽滑动效果的话 , 可以用到vue-touch
vue-touch的使用方法:
1:终端指定命令: npm insall vue-touch@next --save
2:
import VueTouch from 'vue-touch'
Vue.use(VueTouch, {name: 'v-touch'})
3:
<v-touch v-on:swipeleft="swiperleft" v-on:swiperight="swiperright" class="wrapper">
</v-touch>
4:整体代码如下:
<template>
<div class="divFrame">
<div class="divTitle">
<input @click="toLeft" id="Button1" type="button" value="左移" class="btn" />
<input @click="toRight" id="Button2" type="button" value="右移" class="btn" />
</div>
<div class="divContent">
<div class="divList">
<v-touch v-on:swipeleft="swiperleft" v-on:swiperight="swiperright" class="wrapper">
<span>菜单管理</span>
<span>日志管理</span>
<span>课件管理</span>
<span>密码修改</span>
<span>系统管理</span>
</v-touch>
</div>
</div>
</div>
</template>
<script lang="ts">
import $ from 'jquery'
import { Vue } from 'vue-property-decorator';
import VueTouch from 'vue-touch'
Vue.use(VueTouch, {name: 'v-touch'})
export default {
methods:{
async toLeft(){
$(".divList").animate({ left: "-=100px" }, 1000);
},
async toRight(){
$(".divList").animate({ left: "+=100px" }, 1000);
},
async swiperleft(){
$(".divList").animate({ left: "-=100px" }, 1000);
},
async swiperright(){
$(".divList").animate({ left: "+=100px" }, 1000);
},
}
}
</script>
<style type="text/css">
body{font-size:13px}
.divFrame{border:solid 1px #666;width:168px;text-align:center;}
.divFrame .divTitle{background-color:#eee;padding:5px 0px 5px 0px}
.divFrame .divContent{width:108px;height:52px;padding:5px 0px 5px 0px;margin:0px 30px 0px 30px;overflow:hidden}
.divFrame .divContent .divList{width:600px;position:absolute}
.divFrame .divContent .divList span{border:solid 1px #ccc;background-color:#eee;width:100px;height:50px;float:left;margin-right:2px}
.btn {border:#666 1px solid;padding:2px;width:60px;filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8)}
.wrapper{ cursor: pointer;}
</style>
====================================================================
解决jquery 版本问题方法 :
每次 npm install jquery 都经常出现 jquery跟其它包冲突,导致jquery不能用了,更新发现jquery变成了其它版本,想要解决的可以使用如下方法:
1: 卸载之前的 jquery 并保存在 package.json 中
npm uninstall jquery --save
2: 如果卸载完以后 ,package.json 中没有jquery,则跳过这一步骤, 如果出现jQuery(大写Q)
npm uninstall jQuery --save
3: 安装指定版本
npm install jquery@3.6.4 --save