<!-- 轮播banner图 -->
<div class="banner">
<div class="swiper-container" id="swiper-banner">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item, index) in bannerList" :key="index + Math.random()" @click="showToast(item)">
<img :src="item.imgUrl" alt="">
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div> Bscroll.js
<div class="content-box">
<div ref="tab" class="tab">
<ul ref="tabWrapper" class="tab_content">
<li v-for="(item, index) in activityList" :key="index + Math.random()" class="item activity" @click="jumpToActivity(item)">
<img :src="item.imgUrl" alt="">
</li>
</ul>
</div>
</div>

  

import Swiper from 'swiper'
import BScroll from 'better-scroll'
import 'swiper/css/swiper.css'

  

    

mounted () {
this.$nextTick(() => {
this.bannerSwiper = new Swiper('#swiper-banner', {
observer: true,
observeParents: true,
loop: true,
autoplay: {
delay: 3000,
stopOnLastSlide: false
},
pagination: {
el: '.swiper-pagination'
}
})
})
this.$nextTick(() => {
this._initTabScroll()
})
}, methods: {
_initTabScroll () {
const width = 0.24 + 0.24 + 3.14 * this.activityList.length + 0.14 * (this.activityList.length - 1)
this.$refs.tabWrapper.style.width = width + 'rem'
this.$nextTick(() => {
if (!this.scroll) {
this.scroll = new BScroll(this.$refs.tab, {
startX: 0,
click: true,
scrollX: true,
scrollY: false,
eventPassthrough: 'vertical'
})
} else {
this.scroll.refresh()
}
})
}
}

  

swiper.js Bscroll 轮播的更多相关文章

  1. 小程序实践(二):swiper组件实现轮播图效果

    swiper组件类似于Android中的ViewPager,实现类似轮播图的效果,相对于Android的Viewpager,swiper实现起来更加方便,快捷. 效果图: 首先看下swiper支持的属 ...

  2. 使用swiper来实现轮播图

    使用swiper来实现轮播图 swiper实现轮播图几乎是没有一点点技术含量,但是用起来却很方便,包括对移动端的支持也很好. 由于简单这里当然就不会去详细介绍了,推荐两个网址: 1.http://ww ...

  3. Swiper 3D flow轮播使用方法

    swiper 的3d轮播效果,移动端适用 (1). 如需使用Swiper的3d切换首先加载3D flow插件(js和css). <head> <link rel="styl ...

  4. 原生js焦点轮播图

    原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...

  5. 原生js实现轮播图

    原生js实现轮播图 很多网站上都有轮播图,但找到一个系统讲解的却很难,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计 ...

  6. js实现轮播图效果(附源码)--原生js的应用

    1.js实现轮播图效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...

  7. js编写轮播图,广告弹框

    1.轮播图 js编写轮播图,需要用到setInterval(计时器):先给一个div,里面放轮播图的图片,将轮播图的图片明明为相同样式的:如:banner1.jpg,banner2.jpg,banne ...

  8. js原生轮播

    js原生轮播 今天用js做了轮播图,做的不怎么好,希望大家能够看懂. 效果: 1.鼠标放在轮播图上自动停止 2.鼠标离开轮播图自动播放 3.鼠标点击轮播图上的小圆点跳转到相应的图上. 代码: < ...

  9. js实现轮播图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. 封装一个简单的原生js焦点轮播图插件

    轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...

随机推荐

  1. 【七侠传】冲刺阶段--Day2

    [七侠传]冲刺阶段--Day2 团队成员 20181221曾宇涛 20181202李祎铭 20181209沙桐 20181215薛胜瀚 20181216杨越麒 20181223何家豪 20181232 ...

  2. AD9834配置

    SPI设置 注意,虽然手册上CPOL(CLK空闲时电平)为低,但实测是是高电平 连接 SYNC 为片选引脚,使用时拉低 FSE/PSE为频率与相位寄存器选择,均拉低即可 void SPI_Write_ ...

  3. vmware workstation 16.x安装windows server 2012 R2无法点击安装vmware tools选项

    在使用vmware workstation预设安装windows server 2012 R2后,提示需要先升级KBxxxxx更新才可以安装vmware tools,但是在安装了所需的更新后,发现菜单 ...

  4. SQL-while begin end

    declare @i int set @i=1 while @i<=10000000begin insert into dbo.Persons (Age,Sex,Grade,Name) valu ...

  5. PVE联网及更换国内源

    一.PVE联网 第一次安装PVE,正常情况下PVE的IP是在我们上网的网段的.没有网络有可能是没有配置DNS服务器地址或DNS地址是软路由网关地址.解决方法有3种: 1:设置DHCP自动获取网络地址和 ...

  6. Java中接口相关知识

    1.接口 1.1接口概述 接口就是一种公共的规范标准,只要符合标准,大家都可以通用 Java中的接口更多的体现在对行为的抽象 1.2接口的特点 接口用关键字interface修饰,格式:public ...

  7. python 实现视频流下载保存MP4

    # -*- coding:utf-8 -*-import sysimport osfrom glob import globimport requests reload(sys)sys.setdefa ...

  8. PHP实现微信提现V3版本2022-5更新接口:商家转账到零钱

    微信官方又更新了接口... V3版本的微信商家转账到零钱的接口---俗称提现接口 注意事项 一:开通条件:需满足入驻满90天,连续正常交易30天,保持正常健康交易.二:分为页面发起和api接口操作,均 ...

  9. RabbitMQ问题汇总

    内网通过代理服务器访问MQ服务器,无法连接 使用的是socket连接,要设置socket代理,而不是http代理 Properties prop = System.getProperties(); / ...

  10. CSS选择艺术以及CSS文本样式

    CSS选择的艺术1.css规则由两部分构成:选择器,声明(声明由属性和值构成且末尾跟一个分号)2.css注释:/*--*/3.CSS样式的引用(1)行内样式(内联样式)例如:<p style=& ...