swiper | 易学教程

微信小程序——手把手教你写一个微信小程序

阅读更多关于微信小程序——手把手教你写一个微信小程序

前言　　微信小程序年前的跳一跳确实是火了一把，然后呢一直没有时间去实践项目，一直想搞但是工作上不需要所以，嗯嗯嗯嗯嗯emmmmm..... 需求　　小程序语音识别，全景图片观看，登录授权，获取个人基本信息一：基础框架　　官方开发文档： https://developers.weixin.qq.com/miniprogram/dev/ （其实官方文档写的很清楚了）　　跟着官方文档一步一步来，新建一个小程序项目就好然后呢，毕竟默认的只是基本骨架，肌肉线条还是要自己填的 app.json 是当前小程序的全局配置　　小程序的所有页面路径、界面表现、网络超时时间、底部 tab 　　需求一：底部tab，我们要像原生APP那样要有是三个常驻的按钮，切换页面　　在app.json 文件中添加下面的代码就可以了还有哦，一定要配置pagepath（页面路径） "tabBar": { "color": "#cacaca", "selectedColor": "#f40", "borderStyle": "#fff", "backgroundColor": "#ffffff", "list": [ { "pagePath": "pages/index/index", "text": "VR图片", "iconPath": "image/home.png",

Stop swiper slide autoplay on mouse enter and start autoplay on mouse leave

阅读更多关于 Stop swiper slide autoplay on mouse enter and start autoplay on mouse leave

问题 How to stop swiper slide autoplay on mouse enter and start autoplay on mouse leave? I have tried .stopAutoplay() and .startAutoplay() function but not worked for me. thank you here is code. and i face console error Uncaught TypeError: swiper .startAutoplay is not a function var swiper = new Swiper('.swiper-container', { pagination: '.swiper-pagination', paginationClickable: true, nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', spaceBetween: 0, loop: true, effect: 'slide'

Swiper nav buttons outside container

阅读更多关于 Swiper nav buttons outside container

问题 I'm trying to display the nav buttons outside the swiper container, because of the container overflow: hidden i had to create a wrap with position: relative and position the buttons absolutely. That worked, the problem is that now the nav buttons control all sliders and i can't figure out a way to solve this. I don't want to initialize multiple sliders with different classes if the slider is the same with different content. JSFiddle var sliderProdutosDestaque = new Swiper('.slider-produtos

How to fix bug with two-way controll swiper in reactjs

阅读更多关于 How to fix bug with two-way controll swiper in reactjs

问题 So, I have two swipers with two-way controlls: function GroupSchedule({ setModalIsOpen, setModalContent, isFetched }) { const [thumbsSwiper, setThumbsSwiper] = useState(null); const [lessonsSwiper, setLessonsSwiper] = useState(null); return ( <> <TopBar setModalIsOpen={setModalIsOpen} /> <Swiper slidesPerView={4} centeredSlides onSwiper={setThumbsSwiper} controller={{ control: lessonsSwiper }} > {...slides1} </Swiper> { isFetched ? <Loader /> : <Swiper spaceBetween={5} slidesPerView={1}

How to add Multiple pagination on a single Swiper Slider

阅读更多关于 How to add Multiple pagination on a single Swiper Slider

问题 I would like to add two pagination for my swiper slider, something like attached image, one will hold text and another will be dot which comes by default in swiper slider. I tried some code but that did not work. Here is my code var menu = ['Slide 1', 'Slide 2', 'Slide 3'] var swiper = new Swiper('.swiper-container', { pagination: { el: '.swiper-pagination', clickable: true, renderBullet: function (index, className) { return '<span class="' + className + '">' + (menu[index]) + '</span>'; }, }

软件工程第六次作业--结对作业

阅读更多关于软件工程第六次作业--结对作业

在线英语学习平台客户端原型 1.结对成员刘博良 2015034643042 杨子龙 2015034643030 2.需求分析使用NABCD模型进行需求分析 2.1 N（Need, 需求） 2.1.1背景描述和需求简介随着经济全球化和信息全球化的发展，英语能力越来越受到人们的关注。作为国际通用语言的英语，更是在很多重要场合上广泛使用。由此英语的学习越来越被社会所重视，小学到高中自不必说，英语向来是作为考核的课程之一。而在大学的英语四六级考试同样是要求在校大学生有较强的英语能力，而且英语也是考验中的必考课程之一。Crazy在线英语学习平台，顾名思义，是针对英语学习而生的学习平台。而它的主要服务对象是大学生，里面的词汇既有四六级词汇，也有考验英语需要的词汇，无论是为了四六级考试，或者是备战研考，使用Crazy在线英语学习平台都是一个不错的选择。本项目服务对象有两种，客户端用户和后台管理用户。而后台管理用户可划分两种，超级管理员和普通管理员，超级管理员有操作后台数据的一切权利，而普通管理员只有对静态英语数据的储存有全部操作权限，其他的存储模块只有查看的权限。至于客户端用户，是本项目的前端使用者用户，要成为客户端用户，首先需要进行用户注册，注册后进行登录才能使用学习平台进行学习使用。以下把客户端用户简称为用户。用户登录后，可以进入用户的个人中心查看信息

h5仿微信聊天(高仿版)、微信聊天表情|对话框|编辑器

阅读更多关于 h5仿微信聊天(高仿版)、微信聊天表情|对话框|编辑器

之前做过一版h5微信聊天移动端，这段时间闲来无事就整理了下之前项目，又重新在原先的那版基础上升级了下，如是就有了现在的h5仿微信聊天高仿版，新增了微聊、通讯录、探索、我四个模块左右触摸滑屏切换，聊天页面优化了多图预览、视频播放，长按菜单UI，聊天底部编辑器重新优化整理(新增多表情)，弹窗则用到了自己开发的wcPop.js，具体看项目效果图吧！ html代码片段：  < div class ="wc__footTool-panel" >  < div class ="wc__editor-panel wc__borT flexbox" > < div class ="wrap-editor flex1" >< div class ="editor J__wcEditor" contenteditable ="true" ></ div ></ div > < i class ="btn btn-emotion" ></ i > < i class ="btn btn-choose" ></ i > < button class ="btn-submit J__wchatSubmit" > 发送 </ button > </ div >  < div class ="wc__choose

微信小程序-轮播图

阅读更多关于微信小程序-轮播图

1、swiper图片组件页面代码：  <swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1000"> <block wx:for="{{movies}}" wx:for-index="index"> <swiper-item> <image src="{{item.url}}" class="slide-image" mode="aspectFill"/> </swiper-item> </block> </swiper> js代码： // index.js Page({ data : { motto: 'Hello World' , userInfo: {}, hasUserInfo: false , canIUse: wx.canIUse( 'button.open-type.getUserInfo' ), movies: [ { url: 'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640' }, { url: 'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640'

小程序实践（六）：view内部组件排版

阅读更多关于小程序实践（六）：view内部组件排版

　　涉及知识点：　　1、垂直排列，水平排列　　2、居中对齐　　　　示例：　　　　1、默认排版，一个父组件里面两个子view 　　　　　　　　显示效果: 　　　　　　2、先给父view设置一个高度和颜色值，用于看效果　　　　　　　　　　　　　　　　 3、实现水平排列和垂直排列的样式　　　　　水平排列：　　　　 ------> 　　　垂直排列（不进行设置，默认垂直排列）：　　　 ------> 4、实现居中效果　　　居中效果分为两种情况，依赖于3中的水平排列还是垂直排列。　　　 ①、当水平排列的时候， justify-content:center ; 决定水平居中　　　　 ------------------------> 　　　　②、当水平排列的时候， align-items:center; 决定垂直居中　　　　　　 ------------------------> 　　　　　　　　③、当垂直排列的时候， justify-content:center; 决定垂直居中　　　　　　 ------------------------> ④、当垂直排列的时候，align-items:center; 决定水平居中　　　　　　 ------------------------> 　　　　⑤、当 align

小程序实践（四）：动态控制组件的显示/隐藏

阅读更多关于小程序实践（四）：动态控制组件的显示/隐藏

组件有个属性：hidden='' ,值为true/false ，当false的时候说明不隐藏，当true的时候说明隐藏，注意该隐藏是不保留组件位置的。实现即 .js 配合.wxml 文件一、在.js 文件下的 Page({}) 里面的data:{} 里面创建一个布尔类型的属性　　二、在.wxml文件下构建一个view组件　　 ------------------------------------------------------------------------------------------------------ 验证： 1、false，不隐藏的时候　　 2、true，隐藏的时候　　 -------------------------------------------------------------------------------------- 小程序实践（一）：主页tab选项实现小程序实践（二）：swiper组件实现轮播图效果小程序实践（三）：九宫格实现及item跳转小程序实践（四）：动态控制组件的显示/隐藏小程序实践（五）：for循环绑定item的点击事件小程序实践（六）：view内部组件排版小程序实践（七）：页面间传值小程序实践（八）：验证码倒计时功能小程序实践（九）：返回到上一个界面并传值回去小程序实践（十）

订阅 swiper