vue中单页面滑动

最新推荐文章于 2024-08-08 08:32:23 发布

xuqing1226

最新推荐文章于 2024-08-08 08:32:23 发布

阅读量1.2k

点赞数

分类专栏： vue 文章标签： vue中单页面滑动

本文链接：https://blog.csdn.net/xuqingbaobao/article/details/86693497

版权

本文介绍了在Vue项目中实现单页面全屏滑动的方法，通过使用fullPage.js全局滚动插件，并结合animate.css库为滑动效果添加动画。主要步骤包括在main.js中引入相关文件，以及在页面中导入animate.css、vue-fullpage.css和自定义的page.less样式。

摘要由CSDN通过智能技术生成

vue中单页面滑动
全局滚动插件fullPage.js
http://www.360doc.com/content/14/1203/08/19812575_430009823.shtml(jquery)
https://daneden.github.io/animate.css/(里面的动画)
一、main.js中引入文件

// fullpage滑动翻页
import 'animate.css'
import 'vue-fullpage/vue-fullpage.css'
import VueFullpage from 'vue-fullpage'
Vue.use(VueFullpage)

二、页面

<template>
  <div class="fullpage-container" @touchstart="showDeleteButton" >
    <!--@touchend="clearLoop"-->
    <div class="bjlisten">
      <div class="stop" id="off" >
        <img src="/static/endYear/stopYy.png" class="rota" id="music-iocn" alt="旋转">
      </div>
      <!--去掉autoplay取消自动播放-->
      <audio id="audio" src="/static/endYear/wlzy.mp3"  loop></audio>
    </div>

    <div class="fullpage-wp" v-fullpage="opts">
      <!-- 1-->
      <div class="page-1 page">
        <div class="part-1 clearfix" v-animate="{value: 'fadeInDown', delay: 800}">
          <!--<img :src="imgPaht + '/static/endYear/1.jpg'">-->
          <img src="/static/endYear/tex1.png">
        </div>
        <div class="part-2 clearfix" v-animate="{value: 'zoomIn', delay: 200}">
          <img src="/static/endYear/earth1.png">
          <div class="shareImage-icon" v-animate="{value: 'pluse', delay: 200}">
            <img v-if="shopInfo && shopInfo.darenIcon" :src="getPicImageUrl(shopInfo.darenIcon)"/>
            <img v-else src="/static/images/shophome-heart.png"/>
            <div class="clearfix">{
  {shopInfo.darenName}}</div>
          </div>
        </div>
        <div class="part-3 clearfix" v-animate="{value: 'fadeInLeft', delay: 400}">
          <img src="/static/endYear/but1.png">
        </div>
        <div class="arrow clearfix">
          <img src="/static/endYear/arrow.png">
        </div>
      </div>
      <!--2-->
      <div class="page-2 page">
        <div class="part-1 clearfix" v-animate="{value: 'fadeInLeft', delay: 400}">
          <div v-if="shopInfo.becomeDarenTime">
            <span v-if="shopInfo.becomeDarenTime[0]">{
  {shopInfo.becomeDarenTime[0]}}年</span>
            <span v-if="shopInfo.becomeDarenTime[1]">{
  {shopInfo.becomeDarenTime[1]}}月</span>
            <span v-if="shopInfo.becomeDarenTime[2]">{
  {shopInfo.becomeDarenTime[2]}}日</span>
          </div>
          <div>我加入了红人超市，</div>
          <div>生活中又多了一件热爱的事，</div>
          <div>这一刻，我与红人超市故事正式开始。</div>
        </div>
        <div class="part-2 clearfix">
          <img src="/static/endYear/earth2.png">
        </div>
        <div class="part-3 clearfix" v-animate="{value: 'pulse', delay: 200}">
          <img src="/static/endYear/goods2.png">
        </div>
        <div class="part-4 clearfix" >
          <!--<div class="tex1">好礼贺岁活动进行中</div>-->
          <div class="tex1">海量进口好货</div>
          <img class="shareGoodsTwo" id="qr" :src="qr"/>
          <!--<div class="tex2">扫码享受贺岁福利</div>-->
          <div class="tex2">扫码买遍全球</div>
        </div>
        <div class="arrow clearfix">
          <img src="/static/endYear/arrow.png">
        </div>
        <div class="showPic" id="showPicBox">
          <iframe id="picIfr"  scrolling="yes" frameborder="0"></iframe>
          <div class="closePicBox" v-on:click="closePicBox">返回</div>
        </div>
      </div>
      <!--3-->
      <div class="page-3 page" v-if="saleNum>0">
        <div class="part-1 clearfix" v-animate="{value: 'fadeInLeft', delay: 400}">
          <div>在
          <p v-html="test(firstInfoTime)">{
  {firstInfoTime}}日</p>
          </div>
          <div>我的店铺迎来的了第一笔订单，</div>
          <p v-if="topProductName.length>15">{
  {topProductName.substring(0,16)}}...</p>
          <p v-else>{
  {topProductName}}</p>
          <div>这个必入好物，我有给您种草么？</div>
        </div>
        <div class="part-2 clearfix"  v-animate="{value: 'zoomIn', delay: 2200}">
          <img src="/static/endYear/star3.png">
        </div>
        <div class="part-3 clearfix">
          <img src="/static/endYear/center3.png">
        </div>
        <div class="part-4 clearfix">
          从此挣钱不再难
        </div>
        <div class="part-5 clearfix">
          <!--<div class="tex1">好礼贺岁活动进行中</div>-->
          <div class="tex1">海量进口好货</div>
          <img class="shareGoodsTwo" :src="qr"/>
          <!--<div class="tex2">扫码享受贺岁福利</div>-->
          <div class="tex2">扫码买遍全球</div>
        </div>
        <div class="arrow clearfix">
          <img src="/static/endYear/arrow.png">
        </div>
      </div>
      <!--4-->
      <div class="page-4 page" v-if="saleNum>0" >
        <div class="part-1 clearfix" v-animate="{value: 'fadeInLeft', delay: 400}">
          <div>全年我的店铺合计销售了
            <p>{
  {saleNum?saleNum:0}}</p>
            件商品，</div>
          <div v-if="productType">
            <p>{
  {productType}}</p>
            类商品最受大家追捧，</div>
          <p v-if="firstProductName && firstProductName.length>15">{
  {firstProductName.substring(0,16)}}...</p>
          <p v-else-if="firstProductName">{
  {firstProductName}}</p>
          <div v-if="firstProductName">是本店最爆款！</div>
        </div>
        <div class="part-2 clearfix">
          <img src="/static/endYear/goods44.png">
          <div class="part66 clearfix">
            <div class="mzType clearfix">美妆类{
  {mzNum ? mzNum : 0}}件</div>
            <div class="bjType clearfix">保健类{
  {bjNum ? bjNum : 0}}件</div>
            <div class="myType clearfix">母婴类{
  {myNum ? myNum : 0}}件</div>
            <div class="ghType clearfix">个护类{
  {ghNum ? ghNum : 0}}件</div>
            <div class="qtType clearfix">其他类{
  {saleNum - (mzNum ? mzNum : 0) - (bjNum ? bjNum : 0) - (myNum ? myNum : 0) - (ghNum ? ghNum : 0)}}件</div>
          </div>
        </div>
        <div class="part-3 clearfix" v-animate="{value: 'bounceIn', delay: 200}">
          <img src="/static/endYear/house4.png">
        </div>
        <div class="part-4 clearfix">
          人间POS机称号并非浪得虚名~
        </div>
        <div class="part-5 clearfix">
          <!--<div class="tex1">好礼贺岁活动进行中</div>-->
          <div class="tex1">海量进口好货</div>
          <img class="shareGoodsTwo" :src="qr"/>
          <!--<div class="tex2">扫码享受贺岁福利</div>-->
          <div class="tex2">扫码买遍全球</div>
        </div>
        <!--<div class="part-6 clearfix">-->
          <!--<div class="mzType clearfix">美妆类{
  {mzNum ? mzNum : 0}}件</div>-->
          <!--<div class="bjType clearfix">保健类{
  {bjNum ? bjNum : 0}}件</div>-->
          <!--<div class="myType clearfix">母婴类{
  {myNum ? myNum : 0}}件</div>-->
          <!--<div class="ghType clearfix">个护类{
  {ghNum ? ghNum : 0}}件</div>-->
          <!--<div class="qtType clearfix">其他类{
  {saleNum - (mzNum ? mzNum : 0) - (bjNum ? bjNum : 0) - (myNum ? myNum : 0) - (ghNum ? ghNum : 0)}}件</div>-->
        <!--</div>-->
        <div class="arrow clearfix">
          <img src="/static/endYear/arrow.png">
        </div>
      </div>
      <!--5-->
      <div class="page-5 page">
        <div class="part-1 clearfix" v-animate="{value: 'fadeInLeft', delay: 400}">
          <div v-if="saleNum>0">越努力，越幸运，</div>
          <div v-else>这一年，我的小店销售额</div>

          <div v-if="saleNum>0">我的小店销售额超越了商城</div>
          <div v-else>超越了<p>{
  {percentage?percentage:'0%'}}</p>的店主</div>

          <div v-if="saleNum>0">
            <p>{
  {percentage?percentage:'0%'}}</p>的人！
          </div>
          <div v-else>只要继续有您的支持</div>

          <div v-if="saleNum>0">在红人超市开店，实现我的小目标！</div>
          <div v-else>明年必能再创一个小巅峰！</div>
        </div>
        <div class="part-2 clearfix" >
          <img src="/static/endYear/person5.png">
        </div>
        <div class="part-3 clearfix" v-animate="{value: 'zoomIn', delay: 200}">
          <img src="/static/endYear/star5.png">
        </div>
        <div class="part-4 clearfix">
          今年不再进贡给马爸爸，手脚双全了
        </div>
        <div class="part-5 clearfix">
          <!--<div class="tex1">好礼贺岁活动进行中</div>-->
          <div class="tex1">海量进口好货</div>
          <img class="shareGoodsTwo" :src="qr"/>
          <!--<div class="tex2">扫码享受贺岁福利</div>-->
          <div class="tex2">扫码买遍全球</div>
        </div>
        <div class="arrow clearfix">
          <img src="/static/endYear/arrow.png">
        </div>
      </div>
      <!--6-->
      <div class="page-6 page">
        <div class="part-1 clearfix" v-animate="{value: 'fadeInLeft', delay: 400}">
          <div>快递小哥马不停蹄，日夜兼程，</div>
          <div>为我的上帝们奔走全国各地，配送订单</div>
          <div>
            走遍了全国<p>{
  {provinceNum ? provinceNum :0}}</p>个省，
            <p>{
  {cityNum ? cityNum: 0}}</p>个市！
          </div>
        </div>
        <div class="part-2 clearfix">
          <div class="echarts">
            <div :style="{height:'600px',width:'1050px'}" ref="myEchart"></div>
          </div>
          <!--<img src="/static/endYear/earch6.png">-->
        </div>
        <div class="part-3 clearfix" v-animate="{value: 'zoomIn', delay: 200}">
          <img src="/static/endYear/star6.png">
        </div>
        <div class="part-4 clearfix">
          哈哈，看！这是朕打下的江山
        </div>
        <div class="part-5 clearfix">
          <!--<div class="tex1">好礼贺岁活动进行中</div>-->
          <div class="tex1">海量进口好货</div>
          <img class="shareGoodsTwo" :src="qr"/>
          <!--<div class="tex2">扫码享受贺岁福利</div>-->
          <div class="tex2">扫码买遍全球</div>
        </div>
        <div class="arrow clearfix">
          <img src="/static/endYear/arrow.png">
        </div>
      </div>
      <!--7-->
      <div class="page-7 page">
        <div class="part-1 clearfix" v-animate="{value: 'fadeInLeft', delay: 400}">
          <div>这一年，</div>
          <div>
            共有<p>{
  {shopInfo.totalViewerByShop?shopInfo.totalViewerByShop:0}}</p>人来访过我的小店，
          </div>
          <div>其中，</div>
          <div>
            有<p>{
  {shopInfo.totalBuyerByShop?shopInfo.totalBuyerByShop:0}}</p>人在店里购买了商品。
          </div>
        </div>
        <div class="part-2 clearfix">
          <img src="/static/endYear/center7.png">
        </div>
        <div class="part-3 clearfix" v-animate="{value: 'flash', delay: 200}">
          <img src="/static/endYear/goods7.png" >
        </div>
        <div class="part-4 clearfix" v-animate="{value: 'fadeInLeft', delay: 800}">
          我也是有当流量明星的潜质哦~
        </div>
        <div class="part-5 clearfix">
          <!--<div class="tex1">好礼贺岁活动进行中</div>-->
          <div class="tex1">海量进口好货</div>
          <img class="shareGoodsTwo" :src="qr"/>
          <!--<div class="tex2">扫码享受贺岁福利</div>-->
          <div class="tex2">扫码买遍全球</div>
        </div>
        <div class="arrow clearfix">
          <img src="/static/endYear/arrow.png">
        </div>
      </div>
      <!--8-->
      <div class="page-8 page">
        <div class="part-1 clearfix" v-animate="{value: 'fadeInLeft', delay: 400}">
          <img src="/static/endYear/tex8.png">
        </div>
        <div class="part-2 clearfix">
          <!--<a href="/src/components/enYear/enYear">-->
            <!--<img src="/static/endYear/btn8-1.png">-->
          <!--</a>-->
          <a @click="endYearIcon()">
            <img src="/static/endYear/btn8-1.png">
          </a>
        </div>
        <div class="part-3 clearfix">
          <a @click="endHome()">
            <!--<img src="/static/endYear/btn8-2.png">-->
            <img src="/static/endYear/btn8-sy.png">
          </a>
          <!--<router-link :to="{ name: `home`}">-->
            <!--<img src="/static/endYear/btn8-2.png">-->
          <!--</router-link>-->
        </div>
        <div class="part-4 clearfix">
          <img src="/static/endYear/center8.png">
        </div>
        <div class="part-5 clearfix" v-animate="{value: 'zoomIn', delay: 200}">
          <img src="/static/endYear/star8.png">
        </div>
        <div class="part-6 clearfix">
          <img src="/static/endYear/logo8.png">
        </div>
        <div class="part-7 clearfix">
          <!--<img src="/static/endYear/tex8-2.png">-->
          <img src="/static/endYear/tex8-sy.png">
        </div>
        <div class="part-8 clearfix">
          <img class="shareGoodsTwo" :src="qr"/>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {mapState} from 'vuex'
  import Api from '../../api/user/userInfo'
  import qr from 'qrcode'
  import wx from 'weixin-js-sdk'
  import {Toast} from 'mint-ui'
  import echarts from 'echarts'
  import '../../../node_modules/echarts/map/js/china.js' // 引入中国地图数据

  // 获取url参数
  const getQueryString = function (name) {
    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
    var r = location.search.substr(1).match(reg)
    if (r != null) return decodeURI(r[2])
    return null
  }

  export default {
    props: ['userJson'],
    data () {
      return {
        audio: {},
        chart: null,
        qr: '',   // 生成的二维码BASE64
        shopInfo: {},   // 店铺名
        productType: '',  // 卖的最多的商品类
        saleNum: 0, // 总销量
        topSale: '', // 里面的商品都是排第一的
        firstProductName: '', // 里面的商品都是排第一的
        topProductName: '',   // 第一笔单商品
        firstInfoTime: 0,   // 第一笔单商品时间
        mzNum: 0,     // 美妆销售量
        bjNum: 0,     // 保健销售量
        myNum: 0,     // 母婴销售量
        ghNum: 0,     // 个护销售量
        percentage: '',  // 百分比
        cityNum: '',  // 市
        provinceNum: '',  // 省
        provinceList: '',  // 省列表
        myLinkcode: '',   // 进入首页带daren或者report
        status: false,
        // shareIcon: location.href.split('#')[0] + '/static/endYear/shareIcon.jpg',  // 分享出去的icon
        shareIcon: 'http://' + window.location.host + '/static/endYear/shareIcon.jpg',  // 分享出去的icon
        report: getQueryString('report') || this.$route.query.report || this.$route.params.report || false,
        opts: {
          start: 0,
          dir: 'v',
          duration: 500,
          onLeave: function (prev, next, direction) {
            // alert(direction)
            if (direction === 'down') {
              this.fullpage.moveTo(next)
            }
          }
        }
      }
    },
    computed: mapState('user', {
      userType: state => state.userType,
      darenId: state => state.lastVisitedDarenId
    }),
    methods: {
      // 开始按
      showDeleteButton() {
        var This = this
        clearTimeout(This.Loop)
        this.Loop = setTimeout(function() {
          let test
          if (This.report === false) {
            test = This.darenId
          } else {
            test = This.report
          }
          console.log(`http://${location.host}` + This.$route.path)
          console.log(This.$route.path)
          console.log(('/endYear/endYear/' + test))
          console.log(This.myLinkcode)
          // if (This.$route.path !== ('/endYear/endYear/' + test)) {
          if ((`http://${location.host}` + This.$route.path) === This.myLinkcode) {
            This.audio.pause()
          }
        }, 5000)
      },
      clearLoop() {
        clearTimeout(this.Loop)
      },

      playYy() {
        let that = this
        window.onload = function() {
          // 解决不同浏览器不能播放的情况
          // function toggleSound() {
          //      if (audio.paused) { //判读是否播放
          //           audio.play(); //没有就播放
          //      }
          //          }
          // toggleSound();
          (function() {
            that.audio = document.getElementById('audio')
            var musiIocn = document.getElementById('music-iocn')
            var off = document.getElementById('off')
            console.log(that.audio)
            off.onclick = function() {
              if (off.className === 'paly') {    // 如果当前播放
                that.audio.pause()                     // 停止（暂停）
                off.className = 'stop'            // 暂停
                musiIocn.src = 'static/endYear/stopYy.png'  // 暂停图片
                musiIocn.className = ''                     // 取消图片360旋转CSS3动画
              } else if (off.className === 'stop') {       // 如果当前暂停
                that.audio.play()                              // 开始播放
                off.className = 'paly'                    // 开始播放
                musiIocn.src = 'static/endYear/startYy.gif' // 播放图片
                musiIocn.className = 'rota'                // 追加图片360旋转CSS3动画
              }
            }
            window.onunload = function () {
              return this.audio.pause()
            }
            window.onbeforeunload = function () {
              return this.audio.pause()
            }
          })()
        }
      },
      chinaConfigure() {
        console.log(this.userJson)
        let myChart = echarts.init(this.$refs.myEchart) // 这里是为了获得容器所在位置
        window.onresize = myChart.resize
        myChart.setOption({ // 进行相关配置
          backgroundColor: 'transparent',
          tooltip: {
            //   show: false //不显示提示标签
            formatter: '{b}', // 提示标签格式
            backgroundColor: '#ff7f50',  // 提示标签背景颜色
            textStyle: {color: '#fff'}  // 提示标签字体颜色
          },
          series: [{
            type: 'map',
            mapType: 'china',
            label: {
              normal: {
                show: true, // 显示省份标签
                textStyle: {color: '#333'}  // 省份标签字体颜色
              },
              emphasis: {  // 对应的鼠标悬浮效果
                show: true,
                textStyle: {color: '#d5c3f4'}
              }
            },
            itemStyle: {
              normal: {
                borderWidth: 0.5, // 区域边框宽度
                borderColor: '#fff', // 区域边框颜色
                areaColor: '#d5c3f4' // 区域颜色
              },
              emphasis: {
                borderWidth: 0.5,
                borderColor: '#4b0082',
                areaColor: '#ff297f'
              }
            },
            // data:[
            //   {name:'福建', selected:true}//福建为选中状态
            // ],
            data: this.provinceList
          }]
        })
        // myChart.setOption(option);
        // myChart.on('mouseover', function (params) {
        //   var dataIndex = params.dataIndex;
        //   console.log(params);
        // });
      },
      initShare() {
        // TODO 期待抽离
        // 设置微信分享信息
        wx.ready(() => {
          let myLink
          if (this.report === false) {
            myLink = `http://${location.host}/static/html/redirect.html?redirect=${encodeURIComponent(
              `http://${location.host}/#/endYear/endYear/${this.darenId}`
            )}`
          } else {
            myLink = `http://${location.host}/static/html/redirect.html?redirect=${encodeURIComponent(
              `http://${location.host}/#/endYear/endYear/${this.report}`
            )}`
          }
          console.log(myLink)
          wx.onMenuShareTimeline({
            title: `邀您来搭乘我的“红人时光机”`, // 分享标题
            link: myLink,
            // imgUrl: this.getPicImageUrl(this.shopInfo.darenIcon, '180x180') || this.shopLogo, // 分享图标
            // imgUrl: this.shareIcon || this.shopLogo, // 分享图标
            imgUrl: this.getPicImageUrl(this.shareIcon, '180x180') || this.shopLogo, // 分享图标
            success: function () {
              // 用户确认分享后执行的回调函数
              Toast('分享成功')
            },
            cancel: function () {
            }
          })

          wx.onMen