vue app外卖(5) 使用swiper 进行图片轮播
1.查看swiper 文档
https://www.swiper.com.cn/usage/index.html
2. 下载
npm install --save swiper
3.在页面引入
import swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'
4.在页面使用
html
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div> </div>
js
创建一个swipper实例对象,进行视图轮播
有一个参数,第一个为'.swiper-container',第2个为配置对象
//创建一个swipper实例对象,进行视图轮播
//有一个参数,第一个为'.swiper-container',第2个为配置对象
mounted() {
new Swiper ('.swiper-container', {
loop: true,
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
})
},
效果:
vue app外卖(5) 使用swiper 进行图片轮播的更多相关文章
- 小程序图片轮播特效swiper(纯手打)
前言 一个月前还是用vue做微信H5,后面公司业务发展,入坑小程序,做了几款小程,跑了不少坑, 也会陆续在后面几节跟大家分享. 在这节给大家分享这个 小程序图片轮播实现方案 初步的实现思路 我要实现的 ...
- 非常优秀的swiper插件————幻灯片播放、图片轮播
http://www.idangero.us/ http://www.swiper.com.cn/ Swiper中文网 2015-10-15 SuperSlide2: (这是个PC用的滚屏插件,看着不 ...
- Vue学习—Vue写一个图片轮播组件
1.先看效果: 熟悉的图片轮播,只要是个网站,百分之90以上会有个图片轮播.我认为使用图片轮播. 第一可以给人以一种美观的感受,而不会显得网站那么呆板, 第二可以增加显示内容,同样的区域可以显示更多内 ...
- H5如何做手机app(移动Web App)?图片轮播?ionic、MUI
移动Web App 跨平台开发 用户不需要去卖场来下载安装App 任何时候都可以发布App只需要一个开发项目 可以使用HTML5,CSS3以及JavaScript以及服务器端语言来完成(PHP,Rub ...
- 实现一个图片轮播-3d播放效果
前言:最近在做一个音乐播放器,首页要做一个图片轮播,看了bootstrap的carousel插件以及移动端的swipe.js库,都是平面图片轮播的效果,所以自己想着实现类似网易云app里那种3d图片轮 ...
- 循序渐进BootstrapVue,开发公司门户网站(4)--- 使用b-carousel-slide组件实现图片轮播以及vue-awesome-swiper实现图片滑动展示
在BootstrapVue组件库里面,提供了很多对Bootstrap同等类似的组件封装,其中图片轮播可以采用b-carousel-slide组件实现,而有一些小的图片,如客户/合作伙伴Logo或者友情 ...
- 使用FlaycoBanner实现图片轮播效果(加载网络图片)
FlaycoBanner是一个开源图片轮播框架,支持android2.2及以上: git地址:https://github.com/H07000223/FlycoBanner_Master 在andr ...
- Android——播放器和图片轮播
layout文件: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:an ...
- UIScrollView实现图片轮播器及其无限循环效果
图片轮播器: 一.实现效果 实现图片的自动轮播 二.实现代码 storyboard中布局 代码: 1 #import "YYViewController.h" ...
随机推荐
- JS点击
本来是想做一个鼠标点击事件:A,B两个东西,B先隐藏,点击A,B出现,再点一次A,B消失,然后发现在判断不同的情况下,出现了一点小问题 暂时没有问题的写法: <!DOCTYPE html> ...
- codeforces847J Students Initiation 网络流
题目传送门 题意: 有n个人,m对关系,要求每对关系中,有且仅有一个人给另外一个人送礼物,并且使送出礼物最多的人送的礼物尽可能少.并输出送礼物的方案. 思路:这道题麻烦的是网络流模型的转换(废话). ...
- Python爬虫实战——反爬机制的解决策略【阿里】
这一次呢,让我们来试一下"CSDN热门文章的抓取". 话不多说,让我们直接进入CSND官网. (其实是因为我被阿里的反爬磨到没脾气,不想说话--) 一.URL分析 输入" ...
- vue 插槽 slot
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 开启.NET Core 3时代,DevExpress v19.2.5带你全新启航
DevExpress Universal Subscription(又名DevExpress宇宙版或DXperience Universal Suite)是全球使用广泛的.NET用户界面控件套包,De ...
- Hadoop常用端口和定义方法
Hadoop集群的各部分一般都会使用到多个端口,有些是daemon之间进行交互之用,有些是用于RPC访问以及HTTP访问.而随着Hadoop周边组件的增多,完全记不住哪个端口对应哪个应用,特收集记录如 ...
- idea 增量包配置
set CATALINA_OPTS=-server -Xdebug -Xnoagent -Djava.compiler=NONE -Xrunjdwp:transport=dt_socket,serve ...
- foreach循环的跳出
由于foreach循环中不像for循环可以直接通过return或break来终止当前循环,不过这里可以借助try...catch...来完成var arr = [1,2,3,4,5,6,7,8,9,1 ...
- vue 组件的简单使用01
// 组件 自定义全局组件 Vue.component('mycom', { template: '<div v-on:click="count++">自定义组件 +{ ...
- WPF ListBox 横向排列
WPF ListBox 横向排列 如果只是单纯的让ListBox可以横向配列,这样很简单,只需要更改ListBox的ItemsPanel模板就可以,例如: <ListBox><L ...