swiper

var mySwiper = new Swiper ( '.swiper-bottom' , { spaceBetween: 25 , freeMode: true , initialSlide : 1 , //默认第二个 slidesPerView: 2 , //可见个数2 centeredSlides: true , //居中 }); 文章来源: swiper默认第二个且居中

Vue项目里使用vue-awesome-swiper组件，其配置通swiper官网配置，但是在实际项目里使用autoplay：3000 并不能实现自动轮播的效果，后来研究发现是需要把autoplay：true能实现这样的效果 swiperOption: { //以下配置不懂的，可以去swiper官网看api，链接http://www.swiper.com.cn/api/ // notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，<br data-filtered="filtered">　　　　　　　　假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true notNextTick: true, // swiper configs 所有的配置同swiper官方api配置 autoplay: true, speed:1000, setWrapperSize: true, autoHeight: true, pagination: ".swiper-pagination", paginationClickable: true, mousewheelControl: true, observeParents: true, //

vue路由 一、vue关于路由的5个重要对象 1、router-view：类似angular中的router-outlet，router-view会不断的改变成要展示的组件； 2、router-link：直接使用该标签进行标签导航，会被渲染成a标签； 3、routes： 数组，在该数组中配置所有的路由； 4、router：通过router，进行方法导航,方法有push(),replace()(不会有历史记录),go()(有历史记录才可以使用)； 5、route： 类似angular中的activatedRoute，获取传过来的参数。 二、路由传参 路由传参有2种方式：router-link导航传参与方法导航传参 1、router-link导航传参有2种方式： A、通过query传参，header组件向product组件传参，举例如下： header.vue <router-link :to="{name:'product',query:{productName:'苹果手机'}}">展示商品方法一：query传参</router-link> product.vue <p class="showProduct">商品名称(接收header组件的query传值)：{{getProductNameByQuery}}</p> computed: { // 计算属性

前几日抽空看了下小程序，发现挺好玩的，mvvm的结构，语法比vue要简单，内置了一系列的组件，很方便。然后开发者工具直接上传代码，提交审核，然后发布，感觉挺好。虽然不打算做个工具类的，但是做个介绍类小程序就很合适了。不用去做什么官网，也不用买服务器域名什么的，用邮箱注册个号，把自己想介绍的东西方式去，手机上发给别人也挺方便。 结构上很好理解，app.js可以直接获取用户的登录信息，也可以什么都不做，关键还是app.json { "pages" :[ "pages/index/index" , "pages/about/about" , "pages/location/location" , "pages/logs/logs" ], "window" :{ "backgroundTextStyle":"light" , "navigationBarBackgroundColor": "#fff" , "navigationBarTitleText": "书山有路" , "navigationBarTextStyle":"black" }, "tabBar" : { "list" : [{ "pagePath": "pages/index/index" , "text": "首页" , "iconPath": "images/m.png" , "selectedIconPath":

Swiper - 是免费且最现代的移动触摸滑块，具有硬件加速转换和惊人的本机行为。 它旨在用于移动网站，移动网络应用程序和移动原生/混合应用程序。 主要为iOS设计，但也适用于最新的Android，Windows Phone 8和现代桌面浏览器 Swiper不兼容所有平台， 它是一款现代触控滑块，仅专注于现代应用/平台，带来最佳体验和简单性 。 Swiper以及其他优秀组件是 Framework7 的一部分 - 用于构建iOS和Android应用程序的全功能框架。 Swiper也是 Ionic Framework中 的默认滑块组件 Swiper入门 1A。 下载并安装Swiper 首先，我们需要下载所需的Swiper文件： 我们可以从 Swiper GitHub仓库 下载它们 或者我们可以通过鲍尔安装它们，输入终端： $ bower install swiper 或者，使用Atmosphere作为流星包： $ meteor add nolimits4web: swiper 或者，使用NPM $ npm install swiper 在下载/安装的软件包中，我们需要文件 dist/ 夹中的文件。 1B。 从CDN使用Swiper 如果你不想在你的项目中包含Swiper文件，你可以使用它从 Swiper上cdnjs 。 以下文件可用： < link rel = "stylesheet"

前言 一、版本问题 swiperOption: { // 表示pagination的html标签class是swiper-pagination pagination: '.swiper-pagination' } /** 千万不要用下面这套，这一套是swiper4版本的，我们vue-awesome-swiper2.5.4版本的是用swiper3.0的API * pagination: { el: '.swiper-pagination' } */ 二、vue-awesome-swiper在隐藏后在显示，滑动效果无效的bug html代码： <div class="swiper-group"> <!-- 鼠标移动到showSwiper的div时，显示swiper --> <div class="showSwiper"></div> <swiper> <swiper-slide class="swiper-slide-item" v-for="slide in slideItems" >{{slide.name}}</swiper-slide> </swiper> </div> css代码 .swiper-group { position: relative; .showSwiper { width: 20px; height: 20px; position: absolute;

React Native第三方react-native-swiper组件可以实现轮播功能，但是在开发安卓应用的时候，如果同时使用了react-navigation的TabNavigator导航，会出现swiper内容不显示的问题 查看了react-native-swiper的github，发现issue中不少人都遇到了这样的问题 issue： https://github.com/leecade/react-native-swiper/issues/389 最后查找资料发现，在安卓机下，如果用到了可滚动组件例如SectionList,ScrollView或者TabNavigator这种可滑动的组建，swiper都无法正确显示， import React, { Component } from 'react' ; import { StyleSheet, Text, View, Image, } from 'react-native' ; import Swiper from 'react-native-swiper' ; export class ImgSwiper extends Component { constructor(props) { super (props); this .state = { swiperShow : false , }; }

wx:for 和 wx:if 可以很方便的创建 wxml 元素 本例将用 swiper 内对象的创建来展示其效果 1. 前期准备 首先创建目录和工程文件 main main.js 中，创建静态 list data: { testList: [ { name: "测试1", element: "测试1的相关内容", isHighLighted: true, id: 1 }, { name: "测试2", element: "测试2的相关内容", isHighLighted: false, id: 2 }], }, 在 main.wxml 中简单的创建一个 swiper 对象 使用相关参数方便观察 <swiper indicator-dots='true' previous-margin='50rpx' next-margin='50rpx'> 三个参数意思比较明显，在此不作详细解释 2.创建单个 swiper-item(使用wx:if) <swiper-item> <view class='container'> <text>标题:{{testList[0].name}}</text> <text>元素:{{testList[0].element}}</text> <text style="color:red" wx:if="{{testList[0].isHighLighted}}

首先使用npm 或者cnpm下载swiper cnpm install swiper import Swiper from ‘swiper’; import ‘swiper/dist/css/swiper.min.css’; <div class =" swiper - container "> < div class =" swiper - wrapper "> < div class =" swiper - slide "> < img src ="../../ static / images / ad1 . jpg " alt =""> </ div > < div class =" swiper - slide "> < img src ="../../ static / images / ad2 . jpg " alt =""> </ div > < div class =" swiper - slide "> < img src ="../../ static / images / ad3 . jpg " alt =""> </ div > </ div > </ div > mounted(){ var mySwiper = new Swiper( '.swiper-container' , { autoplay:true, loop:true }) },

<html> <head> <link href = "https://cdn.bootcss.com/Swiper/4.3.0/css/swiper.min.css" rel = "stylesheet" type = "text/css" /> </head> <body> <!--轮播111--> <div style = " height : 100px " class = "swiper-container banner1" > <div class = "swiper-wrapper" > <div class = "swiper-slide" ><a href = '' class = "fl" ><img src = "http://bpic.588ku.com/back_pic/05/09/30/9259840b8605406.jpg!r850/fw/800" width = "100%" height = "100px" alt = "111" /></a></div> <div class = "swiper-slide" ><a href = '' class = "fl" ><img src = "http://bpic.588ku.com/back_pic/05/09/30/9259840b8605406.jpg!r850/fw/800" width =