swiper

引自官方文档 　　在微信小程序中存在一类特殊的组件，该类组件是由客户端创建的原生组件。这些组件有： camera canvas input（仅在focus时表现为原生组件） live-player live-pusher map textarea video 由于原生组件脱离在 WebView 渲染流程外，因此在使用时有以下限制： 原生组件的层级是 最高 的，所以页面中的其他组件无论设置 z-index 为多少，都无法盖在原生组件上。 后插入的原生组件可以覆盖之前的原生组件。 原生组件还无法在 picker-view 中使用。 基础库 2.4.4 以下版本，原生组件不支持在 scroll-view、swiper、movable-view 中使用。 部分CSS样式无法应用于原生组件，例如： 无法对原生组件设置 CSS 动画 无法定义原生组件为 position: fixed 不能在父级节点使用 overflow: hidden 来裁剪原生组件的显示区域 原生组件的事件监听不能使用 bind:eventname 的写法，只支持 bindeventname 。原生组件也不支持 catch 和 capture 的事件绑定方式。 原生组件会遮挡 vConsole 弹出的调试面板。在工具上，原生组件是用web组件模拟的，因此很多情况并不能很好的还原真机的表现

【推荐阅读】微服务还能火多久？>>> 格式化日期时间组件：https: // pub.dev/packages/date_format 日期选择组件：https: // pub.dev/packages/flutter_cupertino_date_picker 轮播图组件：https: // pub.dev/packages/flutter_swiper showToast(弹窗提示)：https: // pub.dev/packages/fluttertoast 网络请求(Dio)：https: // pub.dev/packages/dio 解析html数据：https: // pub.dev/packages/flutter_html 加载远程web页面：https: // pub.dev/packages/flutter_inappbrowser 获取设备信息：https: // pub.dev/packages/device_info 实现用高德定位：https: // pub.dev/packages/amap_location 相机拍照 和相册选择：https: // pub.dev/packages/image_picker 视频播放： https: // pub.dev/packages/video_playe (在 Flutter 里官方提供了一个 video

下载及引入 ： 　　 GitHub: https://github.com/surmon-china/vue-awesome-swiper 　　 思否： https://segmentfault.com/a/1190000014609379 swiper的相关配置 参数 类型（swiper3） 默认值（swiper3） 类型（swiper4） 默认值（swiper4） 说明 autoplay Number/Boolean 0/false Object autoplay 自动切换 speed Number 300 Number 300 切换速度 loop Boolean false Boolean false loop模式 loopAdditionalSlides Number 0 Number 0 loop模式下会在slides前后复制若干个slide,，前后复制的个数不会大于原总个数。 loopedSlides Number 1 Number 1 在loop模式下使用slidesPerview:'auto',还需使用该参数设置所要用到的loop个数。 direction String horizontal String horizontal Slides的滑动方向 autoplayDisableOnInteraction Boolean true - - 用户操作swiper之后

Swiper 是目前较为流行的移动端触摸滑动插件，因为其简单好用易上手，受到很多前端开发者的欢迎！于是马上查看 官方 帮助文档开始学习。 今天在我使用的时候遇到了辣手的问题，使用jquery的ajax动态循环生成当到第二页的时候始终滑动不起来，chrome的手机开发者模式和真机模式全都滑动不起来！ 官方规范： <div class="swiper-container" ms-visible="result.status==1"> <div class="swiper-wrapper" > <!-- =======循环部分======= --> <div class="swiper-slide" ms-repeat="result.mediaList"> //此处为一个滑动页内容 </div> <!-- ============== --> </div> </div> 测试代码 <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide orange-slide swiper-slide-active"> <img src="../../images/center/ouya/ba01.jpg"> </div> <div class="swiper-slide orange

效果图 src/components/scroll/index.vue <template> <!-- 通过ref可以获取到dom对象 --> <swiper class="swiper" :options="swiperOption" ref="swiper"> <div class="mine-scroll-pull-down"> <me-loading :text="pullDownText" inline ref="pullDownLoading" /> </div> <swiper-slide> <!-- 所有内容放在插槽里 --> <slot></slot> </swiper-slide> <div class="mine-scroll-pull-up"> <me-loading :text="pullUpText" inline ref="pullUpLoading" /> </div> <div class="swiper-scrollbar" slot="scrollbar"></div> </swiper> </template> <script> import { Swiper, SwiperSlide } from 'vue-awesome-swiper'; import 'swiper/css/swiper.css'; import MeLoading

当页面滚动超过一屏时，显示回到顶部按钮，点击回到顶部 效果图 src/components/scroll/index.vue <template> <!-- 通过ref可以获取到dom对象 --> <swiper class="swiper" :options="swiperOption" ref="swiper"> <div class="mine-scroll-pull-down"> <me-loading :text="pullDownText" inline ref="pullDownLoading" /> </div> <swiper-slide> <!-- 所有内容放在插槽里 --> <slot></slot> </swiper-slide> <div class="mine-scroll-pull-up"> <me-loading :text="pullUpText" inline ref="pullUpLoading" /> </div> <div class="swiper-scrollbar" slot="scrollbar"></div> </swiper> </template> <script> import { Swiper, SwiperSlide } from 'vue-awesome-swiper'; import 'swiper/css

效果图 src/components/scroll/index.vue <template> <!-- 通过ref可以获取到dom对象 --> <swiper class="swiper" :options="swiperOption" ref="swiper"> <div class="mine-scroll-pull-down"> <me-loading :text="pullDownText" inline ref="pullDownLoading" /> </div> <swiper-slide> <!-- 所有内容放在插槽里 --> <slot></slot> </swiper-slide> <div class="mine-scroll-pull-up"> <me-loading :text="pullUpText" inline ref="pullUpLoading" /> </div> <div class="swiper-scrollbar" slot="scrollbar"></div> </swiper> </template> <script> import { Swiper, SwiperSlide } from 'vue-awesome-swiper'; import 'swiper/css/swiper.css'; import MeLoading

1、修改loading组件，增加设置文字的方法 src/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:"加载中..." } }, methods:{ setText(text){ this.loadingText=text; } }, watch:{ text(text){ this.loadingText=text; } } } </script> <style lang="scss" scoped> .mine-loading{ width

效果图 src/components/scroll/index.vue <template> <swiper class="swiper" :options="swiperOption"> <swiper-slide> <!-- 所有内容放在插槽里 --> <slot></slot> </swiper-slide> <div class="swiper-scrollbar" slot="scrollbar"></div> </swiper> </template> <script> import { Swiper, SwiperSlide } from 'vue-awesome-swiper'; import 'swiper/css/swiper.css'; export default { name: 'Scrollbar', title: 'Scrollbar', components: { Swiper, SwiperSlide }, data() { return { swiperOption: { scrollbar: { el: '.swiper-scrollbar', hide: true }, direction:'vertical', slidesPerView:'auto', freeMode:true, setWrapperSize:true } } } }