swiper

react中swiper的配置（纯swiper篇） 本次的swiper的配置基于3.4.2版本的swiper包 本篇博客可以有效解决配置的swiper不轮播，不自动轮播问题 1、首先安装swiper3.4.2版本 npm i swiper@ 3.4 .2 - s 这时候你会发现你的node_modules里面多了一个swiper包，如果你已经安装过其他的swiper，请先卸载 2、如果你的swiper里面轮播的内容是静态的，也就是死数据的话，new swiper可以放在 组件componentDidMount周期里面 componentDidMount ( ) { new Swiper ( '.swiper-container' , { autoplay : 1000 , loop : true } ) } 如果你的资源，会更新，是后期获取的，那么你的new swiper应该写在组件的componentDidUpdate 里面，这样的话，可以更新swiper，避免出现不轮播，效果出不来的情况 componentDidUpdate ( ) { new Swiper ( '.swiper-container' , { autoplay : 2000 , loop : true } ) } 3、swiper的引入和挂载 引入： import Swiper from "swiper

想要实现的效果（主要移动端） 使用了tools.min.js，教程参考： https://blog.csdn.net/tinico/article/details/18033493 然后发现有一个Bug，就是只要触发touch事件，就会左右滚动，但我需要实现的是上下滚动时页面随之往下走 可是不管我是左右滑动还是上下滑动，都会触发这个组件的切换效果，而无法实现页面向下 研究了半天，果断换回swiper了，最后还是想说：swiper真香！ 来源： oschina 链接： https://my.oschina.net/u/4264621/blog/4305093

1、提取公共的颜色值或者像素值得操作：在assets>styles文件下创建varibles.styl。然后在该文件中定义一个变量$bgColor = red 然后在用到该颜色值得时候在该样式中引入文件 @import 'varibles文件的地址'。然后直接可以写该变量的名字就可以了。（7-2） 2、在style样式中引入文件需要用@import。 3、路径简化，可以把经常用到的路径配置成一个别名，此操作在build文件下的webpack.base.conf.js中配置。具体位置在resolve下面的alias对象里面配置。注意：如果在样式中引入样式的路径用到了别名的时候需要加“~”这个波浪线。其他的地方引入不需要加~。 4、样式穿透：我们开发一般会用到其他的插件，这时候如果要修改其样式的话就需要穿透。比如：我们用到了swiper轮播插件，然后我们需要修改其样式，就可以用： 外面的.class >>>插件的.class 这样就可以实现修改。 5、使用axios的时候必须安装：npm install axios --save。 axios的使用如下图> 6、在vue项目中给静态资源添加版本号。方式是 在build文件夹下的webpack.prod.conf里的搜索HtmlWebpackPlugin处，添加hash值就可以了。如下图 来源： oschina 链接： https:/

在安装vue-awesome-swiper时报错swiper/dist/css/swiper.min.css找不到，如下如： 有的回答安装6.0版本的话需要引入另外一个css import 'swiper/swiper-bundle.css' 但是，我替换完css 之后又一个问题出现了，vue-awesome-swiper组件pagination小圆点不显示，并且左右两侧的小图标也没有，也不报错。 找来找去发现是 swiper的版本太高的问题导致的。 于是卸载已经安装的swiper 卸载完成之后会有如下提示： 提示需要swiper@^5.2.0的版本 重新安装swiper@^5.2.0之后就合适了。 就合适了。。 就合适了。。。 来源： oschina 链接： https://my.oschina.net/u/4324212/blog/4436119

list1: [0,1,2,3,4,5,6,7,8,9,10,11......]; //总数据 list2: [] 要求显示顺序为： 即：每9条数据为一个屏幕，自左向右依次排序；思路：先拿数据总数除以3后向上取整，得到总共的列数；再以每一列为单位向里塞三条数据；以此思路整理出如下表格，（第一行<!--红色 -->为i的值，第一列<!--黄色 -->为a的值，相交的部分为对应数据的标识S；） 核心：S= parseInt(i / 3) * 9 + i % 3 + a % 3 * 3 // 此为S和a、i的关系公式； var m; //列数； m = Math.ceil(this.list1.length / 3); //创建m列的item for (var i = 0; i < m; i++) { this.List2.push({ item: [] }) //为每一列添加3条数据； for (var a = 0; a < 3; a++) { //因为向上取整的列数，可能存在最后一列不够三条的情况，所以加此if判断，也可改为如果没有跳出循环； if (this.list1[parseInt(i / 3) * 9 + i % 3 + a % 3 * 3]) { this.list2[i].item.push({ a: this.list1[parseInt(i / 3) * 9 + i

最近在网络上看到了一个教你 小程序 系列教程，觉得很不错。记录下来 1. 教你：微信小程序如何实现scroll-view隐藏滚动条 2. 教你：如何使用scroll-view组件实现视图垂直滚动（附源码） 3. 教你：小程序如何使用swiper组件实现图片切换（附源码） 4. 教你：微信小程序中如何设置拨打电话（附源码） 5. 教你：如何打开小程序如何打开微信自带的地图（附源码） 6. 教你：如何使用小程序画布组件绘制自动缩放正方形（附源码） 7. 教你：如何使用微信小程序video组件播放视频 （附源码） 8. 教你：如何使用小程序画布组件绘制一个会自动旋转正方形 9、 教你：如何使用微信小程序开发一个弹窗页面（附源码） 10. 教你：微信小程序中如何实现分页下拉加载？（附源码） 来源： oschina 链接： https://my.oschina.net/u/4347624/blog/4462485

这个应该是内容比较小的项目，我们来看看怎么实现的啊 老规矩：先放上github： https://github.com/1lid2exun4/H51Resume 接着我们看下效果 后面的时候看代码发现其实有五个页面，注释一行代码就可以释放出来 首先看main.js import Vue from 'vue' import App from './App.vue' import { library } from '@fortawesome/fontawesome-svg-core' // import { faUserSecret} from '@fortawesome/free-solid-svg-icons' import { faVuejs, faHtml5, faJs, faBootstrap, faGithub} from '@fortawesome/free-brands-svg-icons' import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' // library.add(faUserSecret) library.add(faVuejs, faHtml5, faJs, faBootstrap, faGithub) Vue.component('font-awesome-icon',

一、在vue-cli的框架下的main.js(或者main.ts)中引入高德插件，代码如下： import Vue from 'vue' import VueAMap from 'vue-amap' import ElementUI from 'element-ui' import App from './App.vue' import router from './router' import store from './store' import './registerServiceWorker' Vue.use(VueAMap) Vue.use(ElementUI) VueAMap.initAMapApiLoader({ // 高德的key key: '你的高德key', // 插件集合 plugin: [ 'AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor', 'AMap.Geocoder', 'AMap.Geolocation' ], // 高德 sdk 版本，默认为 1.4.4 v: '1.4.10' }) Vue.config

特别注意： 　　※：在components下的组件，图片路径用 /static/img/back.png 这样的根路径形式，不要用../static 或者 ../../static 的形式，不然很坑，有些平台不报错也不显示，有些找不到路径。 tips：防止弹窗遮罩时页面可滚动，在弹窗的外层view标签加上 @touchmove.stop.prevent="" 　 1、关于自定义导航栏中的刘海屏适配问题： 官方提供了一个CSS变量可以直接引用： var(--status-bar-height) 该变量自动匹配设备平台状态栏高度 此变量可以用calc() 加上其他单位数值来使用 具体参数和说明： 官方使用自定义导航栏注意事项 2、swiper中高度无法自适应时，采用动态获取节点赋值给外层swiper组件 uni.createSelectorQuery()后加.in(this)可以防止app端出错 < swiper :indicator-dots ="true" :style ="{height:listHeight+'px'}" :autoplay ="false" :interval ="3000" :duration ="1000" > </ swiper > 　　var _self; export default { data() { return { listHeight:

var swiper = new Swiper('.swiper-container', { pagination: '.swiper-pagination', autoplay: 2000, paginationClickable: true, loop: true, 　　　　　　　//添加这个属性,就可以了 autoplayDisableOnInteraction : false }); 来源： oschina 链接： https://my.oschina.net/u/4352371/blog/4278980