swiper

vue的swiper组件 https://www.npmjs.com/package/vue-awesome-swiper 1、安装 swiper 和 vue-awesome-swiper 插件 cnpm install swiper vue-awesome-swiper --save （截图里只安装了vue-awesome-swiper，后面我又安装了swiper，大家自己补充下） 2、在 components目录下，创建slider目录，导入图片素材，创建index.vue <template> <swiper ref="mySwiper" :options="swiperOptions"> <swiper-slide v- for ="(slider,index) in sliders" :key="index"> <a :href="slider.linkUrl"> <img :src="slider.imgUrl"> </a> </swiper-slide> <div class="swiper-pagination" slot="pagination"></div> <div class="swiper-button-prev" slot="button-prev"></div> <div class="swiper-button-next" slot="button

1、先准备好一个api接口 http://www.imooc.com/api/home/slider 2、安装插件 cnpm install --save axios 3、api/slider.js import axios from 'axios' ; // 获取幻灯片数据 ajax export const getSliders=()=> { return axios.get('http://www.imooc.com/api/home/slider').then(res=> { if (res.data.code===0 ){ console.log(res.data.slider); return res.data.slider; // 返回是数据 } throw new Error('没有成功获取到数据' ); }). catch (err=> { console.log(err); // 错误处理 return [{ linkUrl: 'www.baidu.com' , picUrl:require( 'assets/img/404.png' ) }] }); } 4、在 components/slider/index.vue中引入该方法 <template> <swiper ref="mySwiper" :options="swiperOptions">

当图片还没加载完成时，可以通过loading组件填充空白区 效果图 components/loading/index.vue <template> <div class="mine-loading" :class="{'me-loading-inline':inline}"> <span class="mine-loading-indicator"> <img src="./loading.gif"> </span> <span class="mine-loading-text" v-if="loadingText">{{loadingText}}</span> </div> </template> <script> export default { name:"MeLoading", props:{//过滤器 inline:{ type:Boolean, default:false } }, data(){ return{ loadingText:"加载中..." } } } </script> <style lang="scss" scoped> .mine-loading{ width:100%; height:100%; display: flex; justify-content: center; align-items: center; flex-direction:

vue的swiper组件 https://www.npmjs.com/package/vue-awesome-swiper 1、安装 swiper 和 vue-awesome-swiper 插件 cnpm install swiper vue-awesome-swiper --save （截图里只安装了vue-awesome-swiper，后面我又安装了swiper，大家自己补充下） 2、在 components目录下，创建slider目录，导入图片素材，创建index.vue <template> <swiper ref="mySwiper" :options="swiperOptions"> <swiper-slide v-for="(slider,index) in sliders" :key="index"> <a :href="slider.linkUrl"> <img :src="slider.imgUrl"> </a> </swiper-slide> <div class="swiper-pagination" slot="pagination"></div> <div class="swiper-button-prev" slot="button-prev"></div> <div class="swiper-button-next" slot="button

1、先准备好一个api接口 http://www.imooc.com/api/home/slider 2、安装插件 cnpm install --save axios 3、api/slider.js import axios from 'axios'; //获取幻灯片数据 ajax export const getSliders=()=>{ return axios.get('http://www.imooc.com/api/home/slider').then(res=>{ if(res.data.code===0){ console.log(res.data.slider); return res.data.slider;//返回是数据 } throw new Error('没有成功获取到数据'); }).catch(err=>{ console.log(err); //错误处理 return [{ linkUrl:'www.baidu.com', picUrl:require('assets/img/404.png') }] }); } 4、在 components/slider/index.vue中引入该方法 <template> <swiper ref="mySwiper" :options="swiperOptions"> <swiper-slide v-for="

接上篇 https://www.cnblogs.com/chenyingying0/p/12635369.html 返回顶部组件 base/backtop/index.vue <template> <transition name="mine-backtop"> <a href="javascript:;" class="mine-backtop" v-show="visible" @click="backToTop"> <i class="iconfont icon-backtop"></i> </a> </transition> </template> <script> export default { name:"MeBacktop", props:{ visible:{ type:Boolean, default:false } }, methods:{ backToTop(){ this.$emit("backtop");//基础组件，与业务无关，具体实现去页面里 } } } </script> <style lang="scss" scoped> @import '~assets/scss/mixins'; .mine-backtop{ overflow:hidden; @include flex-center(); width:45px; height:45px;

//px转换为rem (function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { var clientWidth = docEl.clientWidth; if (!clientWidth) return; if (clientWidth >= 750) { docEl.style.fontSize = '100px'; } else { docEl.style.fontSize = 100 * (clientWidth / 750) + 'px'; } }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window); // 页面刷新 回到顶部 $('html ,body').animate({ scrollTop:-10},300); // 头部导航 悬浮 $(window)

写点东西记录一下美好时光，上周学习了一下通过 mpuve 开发微信小程序，看完文档，就准备撸起袖子加油干的时候，一开始就被支持手势滑动的导航栏给搞懵逼了。求助一波百度和谷歌未果后，只能自己动脑动手！为了给像我一样的小菜鸟，提供一下思路，就记录一下吧！可以优化的地方，请大神不吝赐教。 1.mpvue是什么？ 额，这个还是直接看文档： mpvue 官方站点 2.效果预览 不耽误大神时间，没什么亮点，直接上效果图，有兴趣再往下看吧！一切从简。简陋的 demo . 3.实战过程 创建示例项目 vue init mpvue/mpvue-quickstart slidebar 先来实现一个 TabBar 吧,思路和我们平时 web 写 Tab 页是一样，监听点击事件，来回切换。 css3 动画效果来实现底部滚动条的来回切换。 修改 pages/index/index.vue 中 template ： <template> <div> <div class="navbar"> <block v-for="(item,index) in tabs" :key="index"> <div :id="index" :class="{'navbar_item_on':activeIndex == index}" class="navbar_item" @click="tabClick"> <div

3 月，跳不动了？>>> 微信小程序学习笔记（五）音乐播放器（轮播组件） 微信小程序组件中的swiper，滑块视图容器，在其中可以放置swiper-item组件，swiper-item仅可放置在swiper组件中，宽高自动设置为100%。 swiper组件的常用属性： swiper常用属性 属性 类型 默认值 说明 indicator-dots boolean false 是否显示面板指示点 indicator-color color rgba(0,0,0,3) 指示点颜色 indicator-active-color color #000000 当前选中的指示点颜色 autoplay boolean false 是否自动切换 interval number 5000 自动切换时间间隔 1.musicdemo.js代码 轮播组件中显示的图像内容，不能在页面中写死，需要根据程序来进行动态加载。因此，需要在musicdemo.js中写出轮播图的数据。代码如下： /**轮播图数据*/ swiperImgs: [ "/img/banner_1.jpg", "/img/banner_2.jpg", "/img/banner_3.jpg", "/img/banner_4.jpg", "/img/banner_5.jpg", ], 2.musicdemo.wxml代码 <!--轮播图-->

新建目录 posts （阅读页面） 点击目录右键新建page 目录结构如下： 在app.json中，把posts调整为默认显示的页面（暂时先这样，具体的多页面之后再说） { "pages": [ "pages/posts/posts", "pages/welcome/welcome" ], "window": { "navigationBarBackgroundColor": "#405f80" }, "sitemapLocation": "sitemap.json" } 官方文档里找到swiper组件 posts.wxml <!--pages/posts/posts.wxml--> <view> <swiper indicator-dots="true" interval="2000" autoplay="true"> <swiper-item><image src="/images/wx.png"></image></swiper-item> <swiper-item><image src="/images/vr.png"></image></swiper-item> <swiper-item><image src="/images/iqiyi.png"></image></swiper-item> </swiper> </view> posts.wxss