<template>? <div ref="slider">??? <div ref="sliderGroup">????? <slot>????? </slot>??? </div>??? <div>????? <span v-for="(item,index) in dots" :class="{active:currentPageIndex === index}"></span>??? </div>? </div></template><script type="text/ecmascript-6">import BScroll from 'better-scroll'import {addClass} from 'common/js/dom'? export default {??? data() {????? return {??????? dots: [],??????? currentPageIndex: 0????? }??? },??? props: {????? loop: {??????? type: Boolean,??????? default: true????? },????? autoPlay: {??????? type: Boolean,??????? default: true????? },????? interval: {??????? type: Number,??????? default: 4000????? }??? },??? mounted: function() {????? setTimeout(() => {??????? this._getSliderWidth()??????? this._initDots()??????? this._initSlider()????? },20)??? },??? methods: {????? _getSliderWidth() {??????? this.children = this.$refs.sliderGroup.children??????? let width = 0??????? let sliderWidth = this.$refs.slider.clientWidth??????? for(let i=0; i<this.children.length; i++){????????? let child = this.children[i]????????? addClass(child,'slider-item')????????? child.style.width = sliderWidth + 'px'????????? width += sliderWidth??????? }??????? // better-scroll在初始化的過程中如果this.loop為true的話，會左右各克隆一個DOM，所以需要加兩個sliderWidth??????? if(this.loop){????????? width += 2*sliderWidth??????? }??????? this.$refs.sliderGroup.style.width = width + 'px'????? },????? _initDots(){??????? this.dots = new Array(this.children.length)????? },????? _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??????? })??????? this.slider.on('scrollEnd',()=>{????????? let pageIndex = this.slider.getCurrentPage().pageX????????? if(this.loop){??????????? pageIndex -= 1????????? }????????? this.currentPageIndex = pageIndex??????? })????? }??? }? }</script><style scoped rel="stylesheet/stylus">? @import "~common/stylus/variable"? .slider??? min-height: 1px??? .slider-group????? position: relative????? overflow: hidden????? white-space: nowrap????? .slider-item??????? float: left??????? box-sizing: border-box??????? overflow: hidden??????? text-align: center??????? a????????? display: block????????? width: 100%????????? overflow: hidden????????? text-decoration: none??????? 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: $color-text-l??????? &.active????????? width: 20px????????? border-radius: 5px????????? background: $color-text-ll</style>有背景標注的地方在頁面中不起作用，不知道什么原因，求教