账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    Better-scroll 移动端Slide 组件 不能loop
    18
    0

    如题,设置loop 初始化时候不生效
    使用的是官网的demo组件

    组件代码

    <template>
    <!-- 竖屏滑动组件 -->
      <div class="slide" ref="slide">
        <div class="slide-group" ref="slideGroup">
          <slot>
          </slot>
        </div>
      </div>
    </template>
    
    <script type="text/ecmascript-6">
      import BScroll from 'better-scroll'
      const COMPONENT_NAME = 'slide'
      export default {
        name: COMPONENT_NAME,
         props: {
          dataInfo: {
            type: Array, 
          },
          loop: {
            type: Boolean,
            default: true
          },
          autoPlay: {
            type: Boolean,
            default: false
          },
          interval: {
            type: Number,
            default: 4000
          },
          click: {
            type: Boolean,
            default: true
          },
        },
        data() {
          return {
            currentPageIndex: 0
          }
        },
        watch: {
          dataInfo () {
            // 监听数据变化,重新计算scroll
            setTimeout(() => {
              this.refresh()
            }, 60)
          }
        },
        mounted() {
          this.update()
          window.addEventListener('resize', () => {
            if (!this.slide || !this.slide.enabled) {
              return
            }
            clearTimeout(this.resizeTimer)
            this.resizeTimer = setTimeout(() => {
              if (this.slide.isInTransition) {
                this._onScrollEnd()
              } else {
                if (this.autoPlay) {
                  this._play()
                }
              }
              this.refresh()
            }, 60)
          })
        },
        activated() {
          if (!this.slide) {
            return
          }
          this.slide.enable()
          let pageIndex = this.slide.getCurrentPage().pageY
          this.slide.goToPage(0, pageIndex, 0)
          this.currentPageIndex = pageIndex
          if (this.autoPlay) {
            this._play()
          }
        },
        deactivated() {
          this.slide.disable()
          clearTimeout(this.timer)
        },
        beforeDestroy() {
          this.slide.disable()
          clearTimeout(this.timer)
        },
        methods: {
          update() {
            if (this.slide) {
              this.slide.destroy()
            }
            this.$nextTick(() => {
              this.init()
            })
          },
          refresh() {
            this._setSlideHeight(true)
          },
          next() {
            this.slide.next()
          },
          init() {
            clearTimeout(this.timer)
            this.currentPageIndex = 0
            this._initSlide()
            this._setSlideHeight()
            if (this.autoPlay) {
              this._play()
            }
          },
          _setSlideHeight(isResize) {
            this.children = this.$refs.slideGroup.children
            let height = 0
            let slideHeight = this.$refs.slide.clientHeight
            for (let i = 0; i < this.children.length; i++) {
              let child = this.children[i]
              child.style.height = slideHeight + 'px'
              height += slideHeight
            }
            if (this.loop && !isResize) {
              height += 2 * slideHeight
            }
            this.$refs.slideGroup.style.height = height + 'px'
          },
          _initSlide() {
            this.slide = new BScroll(this.$refs.slide, {
              scrollX: false,
              scrollY: true,
              momentum: false,
              stopPropagation: true,
              snap: {
                loop: false,
                threshold: 0.1,
                speed: 400,
                easing: {
                  style: 'cubic-bezier(0.275, 0.885, 0.32, 1.275)'
                }
              },
              bounce: false,
              click: this.click,
            })
            this.slide.on('scrollEnd', this._onScrollEnd)
            this.slide.on('touchEnd', () => {
              if (this.autoPlay) {
                this._play()
              }
            })
            this.slide.on('beforeScrollStart', () => {
              if (this.autoPlay) {
                clearTimeout(this.timer)
              }
            })
          },
          _onScrollEnd() {
            let pageIndex = this.slide.getCurrentPage().pageY
            this.currentPageIndex = pageIndex
            if (this.autoPlay) {
              this._play()
            }
          },
          _play() {
            clearTimeout(this.timer)
            this.timer = setTimeout(() => {
              this.slide.next()
            }, this.interval)
          }
        }
      }
    </script>
    <style lang="less" scoped>
    .slide {
      min-height: 1px;
      height: 100vh;
      overflow: hidden;
      .slide-group {
        position: relative;
      }
    }
    </style>
    

    使用组件

     <slide :dataInfo="infoData.SectionList"  ref="$Slide">
              <template v-if="infoData.Cover_url">
                    <component  :is="infoData.Invitation_Style_Code" :BasicInfo="BasicInfo"     
                :enrollCount="infoData.EnrollCount" v-on:linkto="linkto" 
           :backgroundUrl="infoData.Cover_url" :isCostom="infoData.Custom_App_Template"></component>
          </template>
    </slide>

    另外初始化后在修改数据不刷新页面,会出一个克隆元素 但是数据没有克隆进去。

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • .飛〇 普通会员 1楼
      502 Bad Gateway

      502 Bad Gateway


      nginx
    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部