yxbanner

功能描述

该插件封装了app首页常用的banner图调用

依赖插件

vant、swiper、vue

快速使用

      <link rel="stylesheet" type="text/css" href="libs/vant/vant.min.css" />
      <link rel="stylesheet" type="text/css" href="libs/swiper/css/swiper.min.css" />
    
      <script type="text/javascript" src="libs/vue/vue.js"></script>
      <script type="text/javascript" src="libs/vant/vant.min.js"></script>
      <script type="text/javascript" src="libs/swiper/js/swiper.min.js"></script>
    
      <div id="rootWrap" v-cloak>
          <!-- 轮播图 start -->
          <div class="floor1">
              <van-swipe :autoplay="autoTime" id="vant-banner">
                  <van-swipe-item v-for="(item, index) in banner" :key="index">
                      <img :src='item.image' alt="" @click="bannerJump(index)" class="bannerImg" />
                  </van-swipe-item>
              </van-swipe>
          </div>
          <!-- 轮播图 end -->
      </div>
    
      function initVue() {
          'use strict';
          window.rootVue = new Vue({
              el: '#rootWrap',
              data: {
                  // 自动播放时间
                  autoTime: 2000,
                  banner: [{
                      "image": "http://ryxy.oss-cn-beijing.aliyuncs.com/upload/20190819/s8sers0mt2hj2q8o73drk77ums.png",
                  }, {
                      "image": "http://ryxy.oss-cn-beijing.aliyuncs.com/upload/20190819/u29k9aialeh1srus6le2qooura.png",
                  }, {
                      "image": "http://ryxy.oss-cn-beijing.aliyuncs.com/upload/20190828/659hc3dlpqghgqgcksurh8kqu8.png",
                  }],
              },
    
              created: function() {},
    
              methods: {},
    
              mounted: function() {
    
              },
          })
      }
是否仍需要帮助？ 请保持联络！
最后更新于 2024/11/18