surmon-china / vue-awesome-swiper Goto Github PK
View Code? Open in Web Editor NEW🏆 Swiper component for @vuejs
Home Page: https://github.surmon.me/vue-awesome-swiper
License: MIT License
🏆 Swiper component for @vuejs
Home Page: https://github.surmon.me/vue-awesome-swiper
License: MIT License
main.js:
import { swiper, swiperSlide, swiperPlugins } from 'vue-awesome-swiper'
Vue.component('swiper', swiper)
Vue.component('swiper-slide', swiperSlide)
component.vue
<template>
<swiper :options="swiperOptionTop" class="gallery-top">
<swiper-slide style="background-image:url(http://cdn.gousa.cn/sites/default/files/styles/original_with_watermark/public/kennedy_meadows_0.jpg)"></swiper-slide>
<swiper-slide style="background-image:url(http://cdn.gousa.cn/sites/default/files/styles/original_with_watermark/public/yosemite_national_park_0.jpg)"></swiper-slide>
<swiper-slide style="background-image:url(http://cdn.gousa.cn/sites/default/files/styles/original_with_watermark/public/mount_rainier.jpg)"></swiper-slide>
<swiper-slide style="background-image:url(http://cdn.gousa.cn/sites/default/files/styles/original_with_watermark/public/snoqualmie_pass_0.jpg)"></swiper-slide>
<swiper-slide style="background-image:url(http://cdn.gousa.cn/sites/default/files/styles/original_with_watermark/public/three_sisters_wilderness_0.jpg)"></swiper-slide>
<div class="swiper-button-next swiper-button-white" slot="button-next"></div>
<div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
</swiper>
<swiper :options="swiperOptionThumbs" class="gallery-thumbs">
<swiper-slide style="background-image:url(http://cdn.gousa.cn/sites/default/files/styles/original_with_watermark/public/kennedy_meadows_0.jpg)"></swiper-slide>
<swiper-slide style="background-image:url(http://cdn.gousa.cn/sites/default/files/styles/original_with_watermark/public/yosemite_national_park_0.jpg)"></swiper-slide>
<swiper-slide style="background-image:url(http://cdn.gousa.cn/sites/default/files/styles/original_with_watermark/public/mount_rainier.jpg)"></swiper-slide>
<swiper-slide style="background-image:url(http://cdn.gousa.cn/sites/default/files/styles/original_with_watermark/public/snoqualmie_pass_0.jpg)"></swiper-slide>
<swiper-slide style="background-image:url(http://cdn.gousa.cn/sites/default/files/styles/original_with_watermark/public/three_sisters_wilderness_0.jpg)"></swiper-slide>
</swiper>
</template>
<script>
export default {
data () {
return {
swiperOptionTop: {
name: 'swiperTop',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
spaceBetween: 10
},
swiperOptionThumbs: {
name: 'swiperThumbs',
spaceBetween: 10,
centeredSlides: true,
slidesPerView: 'auto',
touchRatio: 0.2,
slideToClickedSlide: true
}
}
},
ready () {
const swiperTop = this.$children.find((children) => children.options.name === 'swiperTop').swiper
const swiperThumbs = this.$children.find((children) => children.options.name === 'swiperThumbs').swiper
swiperTop.params.control = swiperThumbs
swiperThumbs.params.control = swiperTop
}
}
</script>
Which is exactly as the code in example thumbs-gallery.
Thumbs and gallery look okay, but the gallery won't respond when clicking the thumbs. Console logs error Uncaught TypeError: Cannot read property 'name' of undefined
, which refers to the code in script tag as below:
const swiperTop = this.$children.find((children) => children.options.name === 'swiperTop').swiper
左右拽动以后,自动播放终止
if support async remoting data , i think it will work better
ReferenceError: navigator is not defined
at d:\ws\Vue2Sample\node_modules\swiper\dist\js\swiper.js:3627:22
at d:\ws\Vue2Sample\node_modules\swiper\dist\js\swiper.js:3629:11
at Object. (d:\ws\Vue2Sample\node_modules\swiper\dist\js\swiper.js:4430:3)
<swiper :options="swiperOption" id="carrousel" ref="mySwiperA">
<swiper-slide class="slide bg_lazyload" lazy="loading" v-for="banner in indexData.banner_list"
v-bind:data-image="banner.image"><a href=""></a></swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
data () {
return {
swiperOption: {
autoplay: 50000,
notNextTick: true,
pagination: '.swiper-pagination',
onInit: function (swiper) {
console.log(swiper.slides.length)//这里是0,怀疑是没有渲染到dom,有人告诉我,具体怎么获取ajax返回图片个数?
},
onSlideChangeStart: function(){
},
onSlideNextEnd: function (swiper) {
// console.log(swiper);
}
},
indexData: [],
swiperSlides: 0
}
},
computed: {
swiper () {
return this.$refs.mySwiperA.swiper
}
},
mounted: function () {
this.$http.get('../../../static/api/home/home.json').then((response) => {
this.indexData = response.data
this.swiperSlides = response.data.banner_list.length//2
console.log(this.swiperSlides)
}, (response) => {
console.log(response)
})
}
我这里每次切换都需要重新请求数据需要使用realIndex获取数据用来再次请求
I am trying to integrate vue-awesome-swiper with NUXT.js.
I followed the steps as mentioned in docs for using with components
/ or use with component
import Vue from 'vue'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
// use
export default {
components: {
swiper,
swiperSlide
}
}
But I am getting the error
ERROR in ./~/swiper/dist/css/swiper.css
Module parse failed: /....../node_modules/swiper/dist/css/swiper.css Unexpected token (15:0)
You may need an appropriate loader to handle this file type.
| * Released on: December 13, 2016
| */
| .swiper-container {
| margin-left: auto;
| margin-right: auto;
@ ./~/babel-loader/lib?{"plugins":["transform-async-to-generator","transform-runtime"],"presets":[["es2015",{"modules":false}],"stage-2"]}!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-awesome-swiper/swiper.vue 18:2-39
@ ./~/vue-awesome-swiper/swiper.vue
@ ./~/vue-awesome-swiper/index.js
@ ./plugins/vue-touch.js
@ ./.nuxt/index.js
@ ./.nuxt/client.js
@ multi webpack-hot-middleware/client?reload=true ./.nuxt/client.js
Please suggest a way to integrate.
Thanks.
ERROR in static/js/0.de910ca440d1eebd3dd8.js from UglifyJs
SyntaxError: Unexpected token punc «(», expected punc «:» [./~/vue-awesome-swiper/index.js:15,0]
在vue-cli里面build的时候,压缩js的时候报错。
在代码中设置了shortSwipes : false后,滑动滑块无法触发onSlideChangeStart事件,设置为true就可以触发
在原生的swiper中,有一个函数是点击slide可以加一下动作,我是这样写的
var swiper = new Swiper('.swiper-itme .swiper-container', {
pagination: '.swiper-itme .swiper-pagination',
slidesPerView: 'auto',
paginationClickable: true,
spaceBetween: 15,
onTap: function(swiper){
var index= swiper['clickedIndex'];
_self.focusThis(index);
}
});
用目前的这个插件,不知道怎么写了,我按照以前的方法写了下,但是不支持。
ERROR in .//.0.24.0@css-loader!.//.1.0.0@vue-style-loader!.//.0.24.0@css-loader!.//.1.0.0@vue-style-loader!.//.0.24.0@css-loader!.//.1.0.0@vue-style-loader!.//.0.24.0@css-loader!.//.1.0.0@vue-style-loader!.//.0.24.0@css-loader!.//.1.0.0@vue-style-loader!.//.0.24.0@css-loader!.//.1.0.0@vue-style-loader!.//.0.24.0@css-loader!.//.3.3.1@swiper/dist/css/swiper.css
Module build failed: Unknown word (5:1)
3 | // load the styles
4 | var content = require("!!./../../../.0.24.0@css-loader/index.js!./../../../.1.0.0@vue-style-loader/index.js!./../../../.0.24.0@css-loader/index.js!./../../../.1.0.0@vue-style-loader/index.js!./../../../.0.24.0@css-loader/index.js!./../../../.1.0.0@vue-style-loader/index.js!./../../../.0.24.0@css-loader/index.js!./../../../.1.0.0@vue-style-loader/index.js!./../../../.0.24.0@css-loader/index.js!./../../../.1.0.0@vue-style-loader/index.js!./../../../.0.24.0@css-loader/index.js!./swiper.css");
5 | if(typeof content === 'string') content = [[module.id, content, '']];
| ^
6 | // add the styles to the DOM
7 | var update = require("!./../../../.1.0.0@vue-style-loader/addStyles.js")(content, {});
8 | if(content.locals) module.exports = content.locals;
@ ./~/.3.3.1@swiper/dist/css/swiper.css 4:14-576 13:2-17:4 14:20-582
vue-cli+webpack
main.js
import VueAwesomeSwiper from 'vue-awesome-swiper'
到底怎么用,不都是这样引入就行了吗,怎么找不到模块,安装了啊
error:
in .//vue-awesome-swiper/index.js/vue-awesome-swiper/index.js 6:13-30
Module not found: Error: Can't resolve 'swiper' in 'F:\web\xiaolu\vue\a031\a031\node_modules\vue-awesome-swiper'
@ ./
@ ./src/main.js
@ multi ./build/dev-client ./src/main.js
ERROR in .//.6.2.10@babel-loader/lib!.//.10.3.0@vue-loader/lib/selector.js?type=script&index=0!.//vue-awesome-swiper/swiper.vue/.6.2.10@babel-loader/lib!./
Module not found: Error: Can't resolve 'swiper' in 'F:\web\xiaolu\vue\a031\a031\node_modules\vue-awesome-swiper'
@ .//.10.3.0@vue-loader/lib/selector.js?type=script&index=0!.//vue-awesome-swiper/swiper.vue 5:18-35
@ .//vue-awesome-swiper/swiper.vue/vue-awesome-swiper/index.js
@ ./
@ ./src/main.js
@ multi ./build/dev-client ./src/main.js
导入vue-swiper的时候 报错
window is not defined
at /Users/apple/Desktop/swiper/dist/js/swiper.js:4480:22
您好,我使用您的插件,在Dev模式下,设置swipeOption
如下
data: function () {
return {
swiperOption: {
name: 'currentSwiper',
autoplay: '3000',
pagination: '.swiper-pagination',
paginationClickable: true,
}
};
},
第一个加载页面时,swiper
没有自动轮播,然后我修改一个swiperOption
选项里面的autoplay
值为任意值(比如2000
), 由于
webpack
的热更新机制,页面自动更新,更新完了后就会自动播放。
您可以在手机上面打开
查看效果,谢谢了~
大神,我用webpack打包
在使用动画插件时,如果在index.html中以script形式嵌入swiper.animate1.0.2.min.js文件,就可以实现动画
但是我在js文件中嵌入则不行,下面是我嵌入的代码
require('imports-loader?this=>window,exports=>false,define=>false!../lib/swiper.animate1.0.2.min.js');
完整主程序文件如下:
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
require('imports-loader?this=>window,exports=>false,define=>false!../lib/swiper.animate1.0.2.min.js');
import App from './App.vue'
Vue.use(VueAwesomeSwiper)
new Vue({
el: '#app',
render: h => h(App)
})
Hi! I'm trying to implement your Slider, but I'm having some issues:
SyntaxError: Unexpected token (2:0) while parsing ~/node_modules/vue-awesome-swiper/swiper.vue while parsing file:
~/node_modules/vue-awesome-swiper/swiper.vue
~/node_modules/vue-awesome-swiper/slide.vue:1
<template>
^
Any reason why this is happening? I used the npm install method Thanks!
*Apologize for the basic question ^_^
.swiper-pagination-bullet-active {
background: @color;
}
在vue-awesome-swiper 无法使用this.$http.post
提示:home.vue?642e:104 Uncaught TypeError: Cannot read property 'post' of undefined
vue开启了keep-alive
swiperOption配置开启了lazyLoading跟autoplay
bug出现的场景
从路由a跳转到路由b,在路由b的页面停留时间超过swiper自动播放的时间,点击浏览器后退按钮返回路由a,swiper自动播放失效,对应的swiper里图片也是处于loading状态,没加载。除非手动拖拽一次swiper滚动,才能恢复正常。
if you want customize pagenation style, will not write css in ' scoped mode ' <style>, it need share the class name to global.
slide里面的内容坚单点的
<div class="title">< 开博啦!开博啦!踏上大神的第一步 ></div>
没问题
但是
<div class="acticle-item"> <div class="image"> <img src="src/assets/images/article.jpg"> </div> <div class="content"> <div class="title">< 开博啦!开博啦!踏上大神的第一步 ></div> <div class="drscsdsd"> 搭建用于记录博主的点点滴滴,无论是生活上的还是技术上的。博客刚建好,还不完善请见谅。后面会慢慢完善跟扩展。敬请期待。 </div> </div> </div>
复杂点就崩了,不知道什么问题
Hi,
When using your plugin via NPM and webpack, when I build the project it gives the below error:
ERROR in ./~/swiper/dist/css/swiper.css
Module parse failed: /Users/aaronpitts/Sites/new/node_modules/swiper/dist/css/swiper.css Unexpected token (15:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (15:0)
at Parser.pp$4.raise (/Users/aaronpitts/Sites/new/node_modules/acorn/dist/acorn.js:2221:15)
at Parser.pp.unexpected (/Users/aaronpitts/Sites/new/node_modules/acorn/dist/acorn.js:603:10)
at Parser.pp$3.parseExprAtom (/Users/aaronpitts/Sites/new/node_modules/acorn/dist/acorn.js:1822:12)
at Parser.pp$3.parseExprSubscripts (/Users/aaronpitts/Sites/new/node_modules/acorn/dist/acorn.js:1715:21)
at Parser.pp$3.parseMaybeUnary (/Users/aaronpitts/Sites/new/node_modules/acorn/dist/acorn.js:1692:19)
at Parser.pp$3.parseExprOps (/Users/aaronpitts/Sites/new/node_modules/acorn/dist/acorn.js:1637:21)
at Parser.pp$3.parseMaybeConditional (/Users/aaronpitts/Sites/new/node_modules/acorn/dist/acorn.js:1620:21)
at Parser.pp$3.parseMaybeAssign (/Users/aaronpitts/Sites/new/node_modules/acorn/dist/acorn.js:1597:21)
at Parser.pp$3.parseExpression (/Users/aaronpitts/Sites/new/node_modules/acorn/dist/acorn.js:1573:21)
at Parser.pp$1.parseStatement (/Users/aaronpitts/Sites/new/node_modules/acorn/dist/acorn.js:727:47)
at Parser.pp$1.parseTopLevel (/Users/aaronpitts/Sites/new/node_modules/acorn/dist/acorn.js:638:25)
at Parser.parse (/Users/aaronpitts/Sites/new/node_modules/acorn/dist/acorn.js:516:17)
at Object.parse (/Users/aaronpitts/Sites/new/node_modules/acorn/dist/acorn.js:3098:39)
at Parser.parse (/Users/aaronpitts/Sites/new/node_modules/webpack/lib/Parser.js:902:15)
at DependenciesBlock.<anonymous> (/Users/aaronpitts/Sites/new/node_modules/webpack/lib/NormalModule.js:104:16)
at DependenciesBlock.onModuleBuild (/Users/aaronpitts/Sites/new/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
at nextLoader (/Users/aaronpitts/Sites/new/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
at /Users/aaronpitts/Sites/new/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
at Storage.finished (/Users/aaronpitts/Sites/new/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16)
at /Users/aaronpitts/Sites/new/node_modules/graceful-fs/graceful-fs.js:76:16
at fs.js:334:14
at /Users/aaronpitts/Sites/new/node_modules/graceful-fs/graceful-fs.js:42:10
at FSReqWrap.oncomplete (fs.js:95:15)
@ ./~/babel-loader?presets[]=es2015&plugins[]=transform-runtime&comments=false!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-awesome-swiper/swiper.vue 10:2-39
Any ideas?
Man thanks
你好,我在使用你的插件的时候遇到了一个问题。
在babel的配置文件里,我将node_modules排除了,但是最后编译的文件中,这个插件中index.js文件里的const并没有编译成var,依然是const。
<script>
export default {
name: 'hello-swiper',
data () {
return {
msg: 'Welcome to Your Vue.js App',
swiperOption: {
autoplayStopOnLast: true,
onTransitionEnd(swiper) {
console.log(swiper.isEnd)
},
onReachEnd(swiper) {
console.log(swiper.isEnd);
//怎么在此访问此vue的实例this
reviseMsg();
}
}
}
},
methods: {
//我要在动画结束后调用此vue的实例this,怎么弄???
reviseMsg() {
this.message = 'swiper is finishing'
}
}
}
</script>
问题在代码中,就是要怎么在 onReachEnd()
函数中访问到当前vue
组件的实例this
Hello,
I see there is a closed issue about this, but error still happen...
my porject base on Vue2+vue-router+vuex bundle by webpack2
I change some code and slider is working but without plugin setting
btw...I use style tag to link swiper's style
index.js
var SwiperComponent = require('./swiper.vue')
var SlideComponent = require('./slide.vue')
var swiper = {
swiperSlide: SlideComponent,
swiper: SwiperComponent,
install: function (Vue) {
Vue.component('swiper', SwiperComponent)
Vue.component('swiper-slide', SlideComponent)
}
}
module.exports = swiper
slide.vue
<style src="swiper/dist/css/swiper.css"></style>
<script>
var Swiper
export default {
name: 'swiper',
props: {
options: {
type: Object,
default: function() {
return {
autoplay: 3500
}
}
},
},
ready: function() {
if (!this.swiper && typeof global.window != 'undefined') {
Swiper = require('swiper')
this.swiper = new Swiper(this.$el, this.options)
}
},
mounted: function() {
if (!this.swiper && typeof global.window != 'undefined') {
Swiper = require('swiper')
this.swiper = new Swiper(this.$el, this.options)
}
},
updated: function() {
this.swiper.update()
},
beforeDestroy: function() {
if (!!this.swiper) {
this.swiper = null
delete this.swiper
}
}
}
</script>
I think this is not good enough... Any idea?
Thank's :)
<template>
<swiper :options="swiperOption">
<!-- 幻灯内容 -->
<swiper-slide>
slider1 </swiper-slide>
<swiper-slide>I'm Slide 7</swiper-slide>
<!-- ... -->
<!-- 以下配置均为可选(使用具名slot来确定并应用一些操作控件元素) -->
<div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
<div class="swiper-scrollbar" slot="scrollbar"></div>
</swiper>
</template>
<style>
</style>
<script>
import {swiper, swiperSlide, swiperPlugins} from 'vue-awesome-swiper'
export default {
name: 'carrousel',
components: {
swiper,
swiperSlide
},
data() {
return {
swiperOption: {
// 如果你后续需要找到当前实例化后的swiper对象以对其进行一些操作的话,可以自定义配置一个名字
name: 'currentSwiper',
// 所有配置均为可选(同Swiper配置)
autoplay: 1000,
direction: 'horizontal',
grabCursor: true,
autoHeight: false,
pagination: '.swiper-pagination',
paginationClickable: true,
scrollbar: '.swiper-scrollbar',
// if you need use plugins in the swiper, you can config in here like this
debugger: true,
// swiper callbacks
onTransitionStart: function (swiper) {
console.log(swiper)
},
// more Swiper config ...
// ...
}
}
},
// example code (if you need to get the current swiper object, find the swiper object in current component(vm) childrens)
// 如果你需要得到当前的swiper对象来做一些事情,你可以像下面这样定义一个方法属性来获取当前的swiper对象
computed: {
},
mounted() {
// you can use current swiper object to do something(swiper methods)
}
}
</script>
技术有限还是不懂如何在服务器渲染里操作...
希望能提供标准写法 : )
自己改了CSS样式,打包的时候会把默认CSS打包到最下面,导致样式冲突
添加loop:true 配置后,刷新页面后,轮播的第一张图出现右侧缩进,从而可以看到第二张轮播图。
当点击下一张或者前一张的按钮后,又恢复正常。
您这个例子右边不会出现滚动条,滚动条貌似在左下脚。
当swiper-slide的数量在组件中动态改变时(使用v-for,ajax返回数组),无限循环模式会出现切换错误,反复重复最后一张,并且新数据不能正确地覆盖旧数据。
目前的解决方案是在swiper标签上加入v-if,在数组更新前后置为false/true强行重新渲染组件,不知对于这个特性有没有更好的解决方案?
期待您的回复
是需要依赖vue-material库吗?
在mounted里写会提示
Uncaught (in promise) TypeError: Cannot read property 'name' of undefined
并且点缩略图,大图不能联动
notNextTick为true,initialSlide为1,
This package cannot be used without jQuery, even though Swiper.js does not require it.
发现插件并没有自动引入css所以有样式上的问题、折腾了半天。
解决方法:
1.下载swiper.min.css到本地
2.style中引入
<swiper-slide v-for="url in images">
<img :data-src="url" class="swiper-lazy">
<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
</swiper-slide>
如果data-src直接传string进去的话就可以用, 但是像这样用binding 第一个image就无法自动显示,会卡在spinner那边。必须点击下一张才会显示image
错误信息如下:
ERROR in .//babel-loader/lib!.//vue-loader/lib/selector.js?type=script&index=0
!.//vue-awesome-swiper/swiper.vue/babel-loader/lib!./
Module not found: Error: Cannot resolve module 'style-loader' in D:\wamp\www\svn
\bigdata\homepages\node_modules\vue-awesome-swiper
@ .//vue-loader/lib/selector.js?type=script&index=0!.//v
ue-awesome-swiper/swiper.vue 11:2-39
怎么去配置style-loader呢,因为新的webpack config应该把CSS单独打包的,所以用ExtractTextPlugin.extract
exports.cssLoaders = function (options) {
options = options || {}
// generate loader string to be used with extract text plugin
function generateLoaders (loaders) {
var sourceLoader = loaders.map(function (loader) {
var extraParamChar
if (/?/.test(loader)) {
loader = loader.replace(/?/, '-loader?')
extraParamChar = '&'
} else {
loader = loader + '-loader'
extraParamChar = '?'
}
return loader + (options.sourceMap ? extraParamChar + 'sourceMap' : '')
}).join('!')
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract('vue-style-loader', sourceLoader)
} else {
return ['vue-style-loader', sourceLoader].join('!')
}
}
// http://vuejs.github.io/vue-loader/en/configurations/extract-css.html
return {
css: generateLoaders(['css']),
postcss: generateLoaders(['css']),
less: generateLoaders(['css', 'less']),
sass: generateLoaders(['css', 'sass?indentedSyntax']),
scss: generateLoaders(['css', 'sass']),
stylus: generateLoaders(['css', 'stylus']),
styl: generateLoaders(['css', 'stylus'])
}
}
// Generate loaders for standalone style files (outside of .vue)
exports.styleLoaders = function (options) {
var output = []
var loaders = exports.cssLoaders(options)
for (var extension in loaders) {
var loader = loaders[extension]
output.push({
test: new RegExp('\.' + extension + '$'),
loader: loader
})
}
return output
}
Cannot read property 'update' of undefined
at VueComponent.updated (eval at <anonymous> (app.js:2093), <anonymous>:49:16)
at callHook (eval at <anonymous> (app.js:821), <anonymous>:2754:19)
at flushSchedulerQueue (eval at <anonymous> (app.js:821), <anonymous>:2831:7)
at Array.eval (eval at <anonymous> (app.js:821), <anonymous>:473:20)
at nextTickHandler (eval at <anonymous> (app.js:821), <anonymous>:422:16)
以上是我的报错信息。 代码在https://github.com/liujianhuanzz/vueAdmin/blob/master/src/views/dashboard/index/index-5.vue,其中代码中index-5.vue
使用 vue-awesome-swiper
, 并在 https://github.com/liujianhuanzz/vueAdmin/blob/master/src/views/dashboard/index.vue 中使用。
当手动刷新浏览器时会报上述错误,同时slide不会运行;当改动了某个文件自动刷新时也报错,但是slide会生效运行。
跪求大神帮忙,一直没找到哪里错了。
1:给item设置click事件,click事件执行逻辑后跳转页面。dom刚渲染后,点击item没有执行click事件,拖动item,之后有时可以点击,有时候还是不能。
2:我加入了俩个item,页面初始化后,首先显示的页面是第二个。
如题:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.