swiper

今天用了一下vue-awesome-swiper，轮播数据是动态渲染的，遇到的坑是：配置 loop : true, 无效，不能轮循，查看代码是前后根本没有多插数据，于是百度一下，支的招不少，都不能奏效， 什么添加observer:true,observeParents:true,等都不能奏效，什么加载顺序，都没奏效； 如有遇到同样问题的朋友，可用我的这简单的方法，v-if判断一下，实现loop; swiper容器那v-if判断一下，是否有数据可以解决； 下面列my code： //这是我vue一个组件， < template > < div > //第一个轮播 加了v-if 判断，可以实现 loop 轮循 < swiper v-if = "gglist.length>1" :options = "swiperOption" ref = "mySwiper" class = "swiper-box" > <!-- slides --> < swiper-slide v-for = "m in gglist" > {{ m }} </ swiper-slide > < div class = "swiper-pagination" slot = "pagination" > </ div > < div class = "swiper-button-prev" slot =

话不多说，先贴出vue中使用swiper的方法 1- 终端安装包 npm install swiper 2- 引入包 import Swiper from "swiper" 3- html部分的代码 < --html-- > < template > < div id = " banner " > < div class = " swiper-container " > < div class = " swiper-wrapper " > < div class = " swiper-slide " v-for = " (item,index) in bannerlist " :key = " index " > <--这里的key是我随便定义的数组的index / 你可以按需自行修改--> < img :src="item.img" /> </ div > </ div > < div class = " swiper-pagination " > </ div > </ div > </ div > </ template > 4- js部分的代码 < script > import Swiper from "swiper" ; import http from "../../utils/http" ; export default { name : "banner" ,

swiper是很常用的一个组件，我项目中用到的版本是4.1.6。刚开始，我就按照官网的案例写了个demo，当然图片都是静态写死的，确实可以轮播了，但是我项目的需求是要动态修改轮播图的内容。然后我就改成vue的方式了，js和css是通过cdn引入的。下面是swiper的全部代码： 有问题请加群交流 java群：200909980 ， vue群：128806068 ，或者在下边评论 vue template 代码 轮播内容是通过循环数组自动生成的 < div class = "swiper-container" v-if = "markInfo.attachs && markInfo.attachs.length!=0" > < div class = "swiper-wrapper" > < div class = "swiper-slide" v-for = "item in markInfo.attachs" > < img :src = "item.url" alt = "" height = "100%" > </ div > </ div > <!-- 如果需要分页器 --> < div class = "swiper-pagination" > </ div > <!-- 如果需要导航按钮 --> < div class = "swiper-button-prev" >

Vue使用swiper插件时特别是轮播元素含有动态数据时可能会出现数据为空或者白屏的问题 使用下面的方法可以解决（保证在数据请求之后再渲染页面） 页面结构 < div class = "swiper-container" > < div class = "swiper-wrapper" > < div class = "swiper-slide tpOne" v-if = "topInfo" > < -- 此处为绑定数据的轮播元素 -- > < div class = "bannerBox1" > < div class = "l_label" > {{ topInfo.label }} </ div > < div class = "l_title" > {{ topInfo.title }} </ div > < div class = "l_tips" > {{ topInfo.tips }} </ div > < div class = "l_bottom" > < span > < img src = "..." alt = "" > </ span > {{ topInfo.bottom }} </ div > </ div > </ div > < div class = "swiper-slide" > < img src = "" alt = "" /> </

{"errcode":40165,"errmsg":"invalid weapp pagepath hint: [bsAWua0201ge30]"} 原因：pagepath参数为所需跳转到小程序的具体页面路径，支持带参数,（示例index?foo=bar）， 以前配置的是：miniProgramPage path:/pages/index 解释： 不能以"/"开头； 更多： js时间函数getTime() 在苹果手机上返回NaN的问题 微信小程序swiper滑块视图容器控件使用整理 微信小程序selectComponent获取自定义子组件 来源： oschina 链接： https://my.oschina.net/u/2332115/blog/2988450

一、默认使用 indicator-dots,指示是否面板显示 indicator-color，指示点颜色 indicator-active-color，选中指示点颜色 wxml代码： <swiper autoplay="{{autoplay}}" indicator-dots='true' indicator-active-color='red' interval="3000" duration="1000"> <block wx:for="{{imgUrls}}"> <swiper-item> <image src="{{item}}" class="slide-image" width="355" height="150" /> </swiper-item> </block> </swiper> js代码： data: { imgUrls: [ 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg', 'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg', 'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg' ],

在当前小程序版本中对于Canvas空间绘制图片，存在bug，效率比较低。 导致图片回执完成慢。出现黑屏。 解决方案： 在调用draw(),绘制成功后，延迟使用绘制结果。例如：500毫秒后，输出图片内容。 ctx.draw(false, function () { console.info('绘制成功'); setTimeout(function () { wx.canvasToTempFilePath({ canvasId: 'canvas1', fileType: 'jpg', quality: 1, success: res => { console.info(res); _this.setData({ imgPath: res.tempFilePath }); }, fail: res => { console.error(res); } }, this); },3000); }); 更多： js时间函数getTime() 在苹果手机上返回NaN的问题 微信小程序swiper滑块视图容器控件使用整理 微信小程序selectComponent获取自定义子组件 来源： oschina 链接： https://my.oschina.net/u/2332115/blog/2978830

一、出现问题 var newStartDate = new Date('2017-08-30'); var newStartTime = newStartDate.getTime(); 获取到的时间戳，在Android手机正常，在IPhone中返回NaN。 问题说明： 在苹果手机上时间格式使用“/” 隔开表示。 苹果手机必须这样写，必须用'/'的格式。（安卓手机也可以使用'/'格式。） 二、解决方案 在移动端时间格式转换的时候使用“/”隔开处理使用。 var newStartDate = new Date('2017/08/30'); var newStartTime = newStartDate.getTime(); 代码示例： //苹果手机特殊处理 var endtime = new Date(_this.data.list.endTime.replace(/-/g, '/')); var starttime = new Date(_this.data.list.startTime.replace(/-/g, '/')); 更多： 微信小程序swiper滑块视图容器控件使用整理 微信小程序selectComponent获取自定义子组件 微信小程序组件间通信（二） 来源： oschina 链接： https://my.oschina.net/u/2332115/blog

查看swiper官方文档 https://www.swiper.com.cn/ 相关参数 左右滑动轮播图 html <div class="main"> <div class="swiper-container"> <div class="swiper-wrapper"> <!-- <div class="swiper-slide">--> <!-- <img src="../images/banner.png" class="imgs">--> <!-- </div>--> <!-- <div class="swiper-slide">--> <!-- <img src="../images/banner.png" class="imgs">--> <!-- </div>--> <!-- <div class="swiper-slide">--> <!-- <img src="../images/banner.png" class="imgs">--> <!-- </div>--> </div> </div> </div> js $.ajax({ url: //请求地址, type://请求方式, success:function (res) { console.log(res) if (res.code == 0){ $(".swiper-wrapper").empty();

-app.vue作为根组件被挂载到index.html文件里，其他的所有组件都是在app.vue组件里做文章。 展示给用户的就是app.vue里的内容，你觉得删的没有内容了但实际还有很多是因为什么呢？因为router-view标签，他显示的是当前路由地址对应的内容（组件），也就是说当前路由对应哪个组件哪个组件显示在router-view这里，被用户看到 如果你给我的是2倍图，那我跟元素字体大小设置为50px，则2倍图上量取的px直接除以100即可。如果你给我1倍图那我设置根元素字体大小100px，如果你给我4倍图那我设置根元素字体大小25px。好处就是量取的px值直接除以100即可转化为rem单位 使用less定义变量 创建一个less文件里面定义一个颜色变量$bgColoer="red" 使用时在某个组件style标签里通过@import ""引入即可使用该变量了 轮播图安装指定版本 npm install vue-awesome-swiper@2.6.7 --save 参数与swiper3一样 swiper代表几个轮播图，循环这个标签会多出几个轮播图 在swiper-slide上面v-for循环，一个swiper-slide标签代表一个轮播图里的一个面一个图片，有几个swiper-slide就有几个img轮播 一个图片也可以是多个icons，就循环吗 轮播图直接这样写