ホームページ ウェブフロントエンド jsチュートリアル vue は better-scroll を使用してカルーセル画像とページスクロールを実装します

vue は better-scroll を使用してカルーセル画像とページスクロールを実装します

Jan 04, 2018 pm 02:13 PM
better-scroll スクロール ページ

在我们日常的项目开发中,处理滚动和轮播图是再常见不过的需求了,本文主要和大家介绍了关于vue利用better-scroll实现轮播图与页面滚动的相关资料,文中给出了详细的示例代码供大家参考学习,需要的朋友们下面来一起看看吧。

前言

better-scroll 也很强大,不仅可以做普通的滚动列表,还可以做轮播图、picker 等等...所以本文主要给大家介绍了关于vue用better-scroll实现轮播图与页面滚动的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。

1.安装better-scroll

在根目录中package.json的dependencies中添加:

"better-scroll": "^0.1.15"
ログイン後にコピー

然后 npm i 安装。

2.封装代码

将better-scroll封装成两个基础组件slider和scroll放于src/base文件夹中。

slider.vue 代码

<template>
 <p class="slider" ref="slider">
 <p class="slider-group" ref="sliderGroup">
  <slot>
  </slot>
 </p>
 <p class="dots">
  <span class="dot" :class="{active: currentPageIndex === index }" v-for="(item, index) in dots"></span>
 </p>
 </p>
</template>

<script>
 import {addClass} from '../common/js/dom'
 import BScroll from 'better-scroll'
 export default{
 data() {
  return {
  dots:[],
  currentPageIndex: 0
  }
 },
 props:{
  loop:{
  type:Boolean,
  default:true
  },
  autoPlay:{
  type:Boolean,
  default:true
  },
  interval:{
  type: Number,
  default:4000
  }
 },
 mounted() {
  this._setSliderWidth()
  setTimeout(() => {
  // 在初始化slider前初始化dot
  this._initDots()
  this._initSlider()
  if (this.autoPlay) {
   this._play()
  }
  }, 20)
  // 监听窗口大小改变时间
  window.addEventListener('resize', () => {
  if (!this.slider) {
   return
  }
  this._setSliderWidth(true)
  this.slider.refresh()
  })
 },
 methods:{
  _setSliderWidth(isResize) {
  this.children = this.$refs.sliderGroup.children
  let width = 0
  // slider 可见宽度
  let sliderWidth = this.$refs.slider.clientWidth
  for (let i = 0; i < this.children.length; i++) {
   let child = this.children[i]
   // 设置每个子元素的样式及高度
   addClass(child, &#39;slider-item&#39;)
   child.style.width = sliderWidth + &#39;px&#39;
   // 计算总宽度
   width += sliderWidth
  }
  // 循环播放首尾各加一个,因此总宽度还要加两倍的宽度
  if (this.loop && !isResize) {
   width += 2 * sliderWidth
  }
  this.$refs.sliderGroup.style.width = width + &#39;px&#39;
  },
  _initSlider() {
  this.slider = new BScroll(this.$refs.slider, {
   scrollX: true,
   scrollY: false,
   momentum: false,
   snap: true,
   snapLoop: this.loop,
   snapThreshold: 0.3,
   snapSpeed: 400,
   // click:true
  })
  // 监听滚动结束时间获取pageX
  this.slider.on(&#39;scrollEnd&#39;, () => {
   let pageIndex = this.slider.getCurrentPage().pageX
   if (this.loop) {
   // 由于bscroll循环播放首尾各加一个,因此索引-1
   pageIndex -= 1
   }
   this.currentPageIndex = pageIndex
   if (this.autoPlay) {
   this._play()
   }
  })
  this.slider.on('beforeScrollStart', () => {
   if (this.autoPlay) {
   clearTimeout(this.timer)
   }
  })
  },
  _initDots() {
  // 长度为n的空数组
  this.dots = new Array(this.children.length)
  },
  _play() {
  // currentPageIndex为不含首尾副本的索引,因此若有循环要+2
  let pageIndex = this.currentPageIndex + 1
  if (this.loop) {
   pageIndex += 1
  }
  this.timer = setTimeout(() => {
   this.slider.goToPage(pageIndex, 0, 400)
  }, this.interval)
  }
 },
 // 生命周期destroyed销毁清除定时器,有利于内存释放
 destroyed() {
  clearTimeout(this.timer)
 },
 }
</script>
<style scoped>
 .slider{
 min-height: 1px;
 position: relative;
 }

 .slider-group{
 position: relative;
 overflow: hidden;
 white-space: nowrap;
 }

 .slider-item{
 float: left;
 box-sizing: border-box;
 overflow: hidden;
 text-align: center;
 height: 150px;
 overflow: hidden;
 }

 .slider-item a{
 display: block;
 width: 100%;
 overflow: hidden;
 text-decoration: none;
 }


 .slider-item img{
 display: block;
 width: 100%;
 }

 .dots{
 position: absolute;
 right: 0;
 left: 0;
 bottom: 12px;
 text-align: center;
 font-size: 0;
 }

 .dot{
 display: inline-block;
 margin: 0 4px;
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background: red;
 }

 .active{
 width: 20px;
 border-radius: 5px;
 }
</style>
ログイン後にコピー

该代码引用common/js/dom.js中的addClass()方法为每个轮播图添加一个slider-item类,dom.js代码如下:

export function hasClass (el, className) {
 // 开始或空白字符+类名+空白字符或结束
 let reg = new RegExp('(^|\\s)' + className + '(\\s|$)')
 // 测试元素是否有该类名,返回布尔值
 return reg.test(el.className)
}

export function addClass (el, className) {
 if (hasClass(el, className)) {
 return
 }
// 以空白符为切割位置切割生成新数组
 let newClass = el.className.split(' ')
// 数组中加入新类名
 newClass.push(className)
// 将数组元素放入一个字符串,以空白符间隔
 el.className = newClass.join(' ')
}
ログイン後にコピー

scroll.vue代码

<template>
 <p ref="wrapper">
 <slot></slot>
 </p>
</template>

<script>
 import BScroll from 'better-scroll'

 export default {
 props: {
  probeType: {
  type: Number,
  default: 1
  },
  click: {
  type: Boolean,
  default: true
  },
  listenScroll: {
  type: Boolean,
  default: false
  },
  object: {
  type: Object,
  default: null
  },
  data: {
  type: Array,
  default: null
  },
  string: {
  type: String,
  default: ''
  },
  pullup: {
  type: Boolean,
  default: false
  },
  beforeScroll: {
  type: Boolean,
  default: false
  },
  refreshDelay: {
  type: Number,
  default: 20
  }
 },
 mounted() {
  setTimeout(() => {
  this._initScroll()
  }, 20)
 },
 methods: {
  _initScroll() {
  if (!this.$refs.wrapper) {
   return
  }
  this.scroll = new BScroll(this.$refs.wrapper, {
   probeType: this.probeType,
   click: this.click
  })

  if (this.listenScroll) {
   let me = this
   // pos为位置参数
   this.scroll.on('scroll', (pos) => {
   me.$emit('scroll', pos)
   })
  }

  if (this.pullup) {
   this.scroll.on('scrollEnd', () => {
   if (this.scroll.y <= (this.scroll.maxScrollY + 50)) {
    this.$emit(&#39;scrollToEnd&#39;)
   }
   })
  }

  if (this.beforeScroll) {
   this.scroll.on(&#39;beforeScrollStart&#39;, () => {
   this.$emit('beforeScroll')
   })
  }
  },
  disable() {
  this.scroll && this.scroll.disable()
  },
  enable() {
  this.scroll && this.scroll.enable()
  },
  refresh() {
  this.scroll && this.scroll.refresh()
  },
  scrollTo() {
  this.scroll && this.scroll.scrollTo.apply(this.scroll, arguments)
  },
  scrollToElement() {
  this.scroll && this.scroll.scrollToElement.apply(this.scroll, arguments)
  }
 },
 watch: {
  data() {
  setTimeout(() => {
   this.refresh()
  }, this.refreshDelay)
  },
  string() {
  setTimeout(() => {
   this.refresh()
  }, this.refreshDelay)
  },
  object() {
  setTimeout(() => {
   this.refresh()
  }, this.refreshDelay)
  }
 }
 }
</script>
<style>
</style>
ログイン後にコピー

3.使用封装组件

使用这两个组件的页面组件home.vue 代码如下:

<template>
 <p>
 <scroll :data="su" class="scroll">
  <p>
   <p class="slider-wrapper">
    <slider>
     <p v-for=&#39;item in slider&#39;>
      <a href="">
       <img :src="item.url" alt="">
      </a>
     </p>
    </slider>
   </p>
   <ul v-for=&#39;item in su&#39;>
    <li>{{item}}</li>
   </ul>
  </p>
 </scroll>
 </p>
</template>
<script>
 import Slider from '../base/slider'
 import Scroll from '../base/scroll'
export default {
 data () {
  return {
   slider: [
    {url: 'http://upload-images.jianshu.io/upload_images/7932253-54c81df0beed405b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1080/q/50'},
    {url: 'https://y.gtimg.cn/music/photo_new/T003R720x288M000004ERTpn1UBu2f.jpg?max_age=2592000&max_age=2592000'},
    {url: 'https://y.gtimg.cn/music/photo_new/T003R720x288M00000077s7P0HaZpc.jpg?max_age=2592000&max_age=2592000'},
    {url: 'https://y.gtimg.cn/music/photo_new/T003R720x288M000001QL1Si05yMPq.jpg?max_age=2592000&max_age=2592000'},
    {url: 'https://y.gtimg.cn/music/photo_new/T003R720x288M000002ke7OC3ooZ5g.jpg?max_age=2592000&max_age=2592000'},
   ],
   su:[1,2,3,4,5,6,7,8,9,10,1,2,3,4,2,3,5,8,7,4,]
  }
 },
 methods: {
 },
 components: {
  Slider,
  Scroll
 }
}
</script>
<style>
.slider-wrapper{
 width: 100%;
 position: relative;
 overflow: hidden;
}
.scroll{
 height: 500px;
}
</style>
ログイン後にコピー

注意点:

slider组件的父元素必须给他一个100%的宽度且定义overflow:hidden,否则整个页面会被撑开,整个页面都能横向滚动
scroll组件在引用时必须给他一个固定高度。只有拥有固定高度才会发生滚动。

效果图如下:


相关推荐:

js实现移动端手指滑动轮播图效果

jquery版轮播图效果和extend扩展实例分享

关于JQuery和html+css实现带小圆点和左右按钮的轮播图分享

以上がvue は better-scroll を使用してカルーセル画像とページスクロールを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Wordでページをコピーする方法 Wordでページをコピーする方法 Feb 20, 2024 am 10:09 AM

Microsoft Word でページをコピーし、書式設定をそのまま維持したいですか? Word でページを複製すると、特定の文書レイアウトまたは形式のコピーを複数作成する場合に時間の節約に役立つため、これは賢明なアイデアです。このガイドでは、テンプレートを作成する場合でも、文書内の特定のページをコピーする場合でも、Word でページをコピーする手順を段階的に説明します。これらの簡単な手順は、最初から始めなくてもページを簡単に再作成できるように設計されています。 Microsoft Word でページをコピーする必要があるのですか? Word でページをコピーすることが非常に有益である理由はいくつかあります。 特定のレイアウトまたは形式の文書をコピーしたい場合。ページ全体を最初から再作成するのとは異なります

JavaScriptで指定した要素の位置へのスクロールを実装するにはどうすればよいですか? JavaScriptで指定した要素の位置へのスクロールを実装するにはどうすればよいですか? Oct 22, 2023 am 08:12 AM

JavaScriptで指定した要素位置までスクロールする機能を実装するにはどうすればよいですか? Web ページにおいて、ユーザーの視線を特定の要素の位置に集中させる必要がある場合、JavaScript を使用して、指定された要素の位置までスクロールする機能を実装できます。この記事では、JavaScript を使用してこの関数を実装する方法と、対応するコード例を紹介します。まず、対象要素の位置情報を取得する必要があります。 Element.getBoundingClientを使用できます

iPhone のスタンバイ モードをカスタマイズおよび編集する方法: iOS 17 の新機能 iPhone のスタンバイ モードをカスタマイズおよび編集する方法: iOS 17 の新機能 Sep 21, 2023 pm 04:01 PM

スタンバイは iOS 17 アップデートの新機能で、携帯電話がアイドル状態のときにすぐに情報にアクセスするための新しく強化された方法を提供します。 StandBy を使用すると、時間を確認したり、今後のイベントを表示したり、カレンダーを参照したり、現在地の天気予報の最新情報を入手したりすることができます。起動すると、充電中に横向きに設定すると、iPhone が直感的にスタンバイ モードに入ります。この機能は、ベッドサイドテーブルなどのワイヤレス充電ポイント、または日常業務中に iPhone の充電から離れているときに最適です。スタンバイ中に表示されるさまざまなウィジェットをスワイプすることで、さまざまなアプリのさまざまな情報にアクセスできます。ただし、好みや頻繁に必要な情報に基づいて、これらのウィジェットを変更したり、一部を削除したりすることもできます。それでは、詳しく見ていきましょう

Web ページをすばやく更新するにはどうすればよいですか? Web ページをすばやく更新するにはどうすればよいですか? Feb 18, 2024 pm 01:14 PM

ネットワークを日常的に使用する中でページの更新は頻繁に行われますが、Web ページにアクセスすると、Web ページが読み込まれない、表示が異常になるなどの問題が発生することがあります。現時点では、通常、問題を解決するためにページを更新することを選択しますが、ページを素早く更新するにはどうすればよいでしょうか?ページ更新のショートカット キーについて説明します。ページ更新ショートカットキーは、キーボード操作で現在のWebページを素早く更新する方法です。オペレーティング システムやブラウザが異なると、ページを更新するためのショートカット キーが異なる場合があります。以下では一般的な W を使用します。

iPhoneのホーム画面ページを並べ替え、無効化、削除する方法 iPhoneのホーム画面ページを並べ替え、無効化、削除する方法 Nov 29, 2023 am 08:22 AM

iOS では、Apple は iPhone の個々のホーム画面ページを無効にすることを許可しています。ホーム画面のページを無効にするだけでなく、ホーム画面のページの順序を並べ替えたり、ページを直接削除したりすることもできます。仕組みは次のとおりです。ホーム画面のページを並べ替える方法 ホーム画面でスペースをタッチしたままにして、ジッター モードに入ります。ホーム画面ページを表す点の列をタップします。表示されるホーム画面のグリッドで、ページをタッチしてドラッグし、他のページとの相対的な位置を再配置します。ドラッグに応じて他のものも動きます。新しい配置に満足したら、画面の右上隅にある「完了」をタップし、もう一度「完了」をタップしてディザモードを終了します。ホーム画面ページを無効化または削除する方法 ホーム画面でスペースを押したままにして、ディザ モードに入ります。タップしてホーム画面を表示します

HTML、CSS、jQuery: 自動スクロール掲示板を作成する HTML、CSS、jQuery: 自動スクロール掲示板を作成する Oct 27, 2023 pm 06:31 PM

HTML、CSS、および jQuery: 自動的にスクロールする掲示板を作成する 最新の Web デザインでは、重要な情報を伝え、ユーザーの注意を引くために掲示板がよく使用されます。自動スクロール掲示板は、Web ページ上で広く使用されており、掲示板のコンテンツがページ上でスクロールしてアニメーション形式で表示され、情報の表示効果とユーザー エクスペリエンスが向上します。この記事ではHTML、CSS、jQueryを使って自動スクロール掲示板を作る方法と具体的なコード例を紹介します。まず、HTが必要です

3 秒でページジャンプを実装する方法: PHP プログラミングガイド 3 秒でページジャンプを実装する方法: PHP プログラミングガイド Mar 25, 2024 am 10:42 AM

タイトル: 3秒でできるページジャンプの実装方法: PHPプログラミングガイド Web開発においてページジャンプは一般的な操作ですが、通常はHTMLやJavaScriptのメソッド内のメタタグを使ってページにジャンプします。ただし、特定のケースでは、サーバー側でページ ジャンプを実行する必要があります。この記事では、PHPプログラミングを使用して、3秒以内に指定したページに自動でジャンプする機能を実装する方法と、具体的なコード例を紹介します。 PHP を使用したページジャンプの基本原理 PHP は一種の

iframe のスクロール動作を監視する iframe のスクロール動作を監視する Feb 18, 2024 pm 08:40 PM

iframe のスクロールを監視する方法には、特定のコード サンプルが必要です。iframe タグを使用して Web ページに他の Web ページを埋め込む場合、場合によっては、iframe 内のコンテンツに対して特定の操作を実行する必要があります。一般的なニーズの 1 つは、スクロールが発生したときに対応するコードを実行できるように、iframe のスクロール イベントをリッスンすることです。以下では、JavaScript を使用して iframe のスクロールを監視する方法を紹介し、参考として具体的なコード例を示します。 iframe 要素を取得する まず、必要なものがあります。

See all articles