{"id":552,"date":"2020-03-02T16:56:52","date_gmt":"2020-03-02T08:56:52","guid":{"rendered":"https:\/\/blog.cqdefxxx.com\/?p=552"},"modified":"2020-03-02T16:56:52","modified_gmt":"2020-03-02T08:56:52","slug":"vue-swiper","status":"publish","type":"post","link":"https:\/\/blog.viter.top\/index.php\/2020\/03\/02\/vue-swiper\/","title":{"rendered":"Vue-swiper"},"content":{"rendered":"

01-swiper-\u9759\u6001<\/h1>\n
<!DOCTYPE html>\n<html>\n<head>\n<meta charset=\"utf-8\">\n<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\">\n<title>Examples<\/title>\n<meta name=\"description\" content=\"\">\n<meta name=\"keywords\" content=\"\">\n\n<link rel=\"stylesheet\" href=\"lib\/swiper\/css\/swiper.css\">\n<script src=\"lib\/swiper\/js\/swiper.js\"><\/script>\n\n<style>\n\t.swiper-container {\n\t    width: 600px;\n\t    height: 300px;\n\t}  \n<\/style>\n<\/head>\n<body>\n    <div class=\"swiper-container kerwin\">\n        <div class=\"swiper-wrapper\">\n            <div class=\"swiper-slide\">Slide 11111<\/div>\n            <div class=\"swiper-slide\">Slide 22222<\/div>\n            <div class=\"swiper-slide\">Slide 333333<\/div>\n        <\/div>\n        <!-- \u5982\u679c\u9700\u8981\u5206\u9875\u5668 -->\n        <div class=\"swiper-pagination\"><\/div>\n        \n        <!-- \u5982\u679c\u9700\u8981\u5bfc\u822a\u6309\u94ae -->\n        <div class=\"swiper-button-prev\"><\/div>\n        <div class=\"swiper-button-next\"><\/div>\n        \n        <!-- \u5982\u679c\u9700\u8981\u6eda\u52a8\u6761 -->\n<!--         <div class=\"swiper-scrollbar\"><\/div>\n -->    <\/div>\n\n\n    <script type=\"text\/javascript\">\n    \t\n    \tnew Swiper ('.kerwin',{\n        pagination: {\n           el: '.swiper-pagination',\n         },\n         \/\/ direction: 'vertical', \n        loop: true,\n        autoplay: {\n          delay: 2500,\n          disableOnInteraction: false,\n        },\n        \/\/ \u5982\u679c\u9700\u8981\u524d\u8fdb\u540e\u9000\u6309\u94ae\n        navigation: {\n          nextEl: '.swiper-button-next',\n          prevEl: '.swiper-button-prev',\n        },\n\n      })\n    <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n
 <\/p>\n
02-swiper-\u52a8\u6001<\/h1>\n
<!DOCTYPE html>\n<html>\n<head>\n<meta charset=\"utf-8\">\n<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\">\n<title>Examples<\/title>\n<meta name=\"description\" content=\"\">\n<meta name=\"keywords\" content=\"\">\n\n<link rel=\"stylesheet\" href=\"lib\/swiper\/css\/swiper.css\">\n<script src=\"lib\/swiper\/js\/swiper.js\"><\/script>\n\n<style>\n  .swiper-container {\n      width: 600px;\n      height: 300px;\n  }  \n<\/style>\n<\/head>\n<body>\n    <div class=\"swiper-container kerwin\">\n        <div class=\"swiper-wrapper\">\n            \n        <\/div>\n        <!-- \u5982\u679c\u9700\u8981\u5206\u9875\u5668 -->\n        <div class=\"swiper-pagination\"><\/div>\n        \n        <!-- \u5982\u679c\u9700\u8981\u5bfc\u822a\u6309\u94ae -->\n        <!-- <div class=\"swiper-button-prev\"><\/div> -->\n        <!-- <div class=\"swiper-button-next\"><\/div> -->\n        \n        <!-- \u5982\u679c\u9700\u8981\u6eda\u52a8\u6761 -->\n        <!-- <div class=\"swiper-scrollbar\"><\/div> -->\n    <\/div>\n\n\n    <script type=\"text\/javascript\">\n\n      setTimeout(() => {\n        var list=[\"111\",\"222\",\"333\",\"4444\"]\n\n\n        var owrapper = document.getElementsByClassName(\"swiper-wrapper\")[0];\n\n        var olist=  list.map(item=>`<div class=\"swiper-slide\">${item}<\/div>`);\n        console.log(olist.join(\"\"));\n        \n        owrapper.innerHTML = olist.join(\"\");\n\n\n        new Swiper ('.kerwin',{\n          pagination: {\n             el: '.swiper-pagination',\n           },\n           \/\/ direction: 'vertical', \n          loop: true,\n          autoplay: {\n            delay: 2500,\n            disableOnInteraction: false,\n          },\n          \/\/ \u5982\u679c\u9700\u8981\u524d\u8fdb\u540e\u9000\u6309\u94ae\n          navigation: {\n            nextEl: '.swiper-button-next',\n            prevEl: '.swiper-button-prev',\n          },\n\n        })\n\n        \n      }, 2000)\n\n     \n\n    <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n
 <\/p>\n
03-vue-swiper<\/h1>\n
<!DOCTYPE html>\n<html>\n<head>\n<meta charset=\"utf-8\">\n<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\">\n<title>Examples<\/title>\n<meta name=\"description\" content=\"\">\n<meta name=\"keywords\" content=\"\">\n<link href=\"\" rel=\"stylesheet\">\n\n<script type=\"text\/javascript\" src=\"lib\/vue.js\"><\/script>\n<link rel=\"stylesheet\" href=\"lib\/swiper\/css\/swiper.css\">\n<script src=\"lib\/swiper\/js\/swiper.js\"><\/script>\n<style>\n  .swiper-container {\n      width: 600px;\n      height: 300px;\n  }  \n<\/style>\n<\/head>\n<body>\n   \n    <div id=\"box\">\n      \n       <div class=\"swiper-container kerwin\">\n           <div class=\"swiper-wrapper\">\n               <div class=\"swiper-slide\" v-for=\"data in datalist\">\n                 {{data}}\n               <\/div>\n           <\/div>\n           <!-- \u5982\u679c\u9700\u8981\u5206\u9875\u5668 -->\n           <div class=\"swiper-pagination\"><\/div>\n           \n           <!-- \u5982\u679c\u9700\u8981\u5bfc\u822a\u6309\u94ae -->\n           <!-- <div class=\"swiper-button-prev\"><\/div> -->\n           <!-- <div class=\"swiper-button-next\"><\/div> -->\n           \n           <!-- \u5982\u679c\u9700\u8981\u6eda\u52a8\u6761 -->\n           <!-- <div class=\"swiper-scrollbar\"><\/div> -->\n       <\/div>\n    <\/div>\n\n    <script type=\"text\/javascript\">\n       \n\t\t    \n\n        var vm = new Vue({\n          el:\"#box\",\n          data:{\n            datalist:[]\n          },\n\n          mounted(){\n          \tsetTimeout(() => {\n          \t  \tthis.datalist=[\"111\",\"222\",\"333\"]\n                \/\/\u6570\u636e\u66f4\u65b0\u5b8c\u4e86  === dom\u66f4\u65b0\u5b8c\u4e86\u5417\uff1f no \u8fd9\u4e2a\u8fc7\u7a0b\u662f\u5f02\u6b65\n                \n                \/\/ var oslide= document.querySelector(\".swiper-slide\");\n                \/\/ console.log(oslide);\n\n\n                \n\n\n          \t}, 2000)\n          },\n\n          updated(){\n            \/\/ var oslide= document.querySelectorAll(\".swiper-slide\");\n            \/\/ console.log(oslide);\n            new Swiper ('.kerwin',{\n              pagination: {\n                 el: '.swiper-pagination',\n               },\n               \/\/ direction: 'vertical', \n              loop: true,\n              autoplay: {\n                delay: 2500,\n                disableOnInteraction: false,\n              },\n              \/\/ \u5982\u679c\u9700\u8981\u524d\u8fdb\u540e\u9000\u6309\u94ae\n              navigation: {\n                nextEl: '.swiper-button-next',\n                prevEl: '.swiper-button-prev',\n              },\n\n            })\n          }\n        })\n\n    <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n
 <\/p>\n
04-vue-swiper-\u7ec4\u4ef6<\/h1>\n
<!DOCTYPE html>\n<html>\n<head>\n<meta charset=\"utf-8\">\n<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\">\n<title>Examples<\/title>\n<meta name=\"description\" content=\"\">\n<meta name=\"keywords\" content=\"\">\n<link href=\"\" rel=\"stylesheet\">\n\n<script type=\"text\/javascript\" src=\"lib\/vue.js\"><\/script>\n<link rel=\"stylesheet\" href=\"lib\/swiper\/css\/swiper.css\">\n<script src=\"lib\/swiper\/js\/swiper.js\"><\/script>\n<script src=\"https:\/\/unpkg.com\/axios\/dist\/axios.min.js\"><\/script>\n\n<style>\n  .swiper-container {\n      width: 600px;\n      height: 300px;\n  }  \n\n  .swiper-slide img{\n    width: 100%;\n  }\n<\/style>\n<\/head>\n<body>\n   \n    <div id=\"box\">\n      \n       <swiper>\n         <div class=\"swiper-slide\" v-for=\"data in datalist\">\n           <img :src=\"data.imgUrl\" \/>\n         <\/div>\n       <\/swiper>\n    <\/div>\n\n    <script type=\"text\/javascript\">\n       \n        Vue.component(\"swiper\",{\n          template:`<div class=\"swiper-container kerwin\">\n           <div class=\"swiper-wrapper\">\n               <slot><\/slot>\n           <\/div>\n           <!-- \u5982\u679c\u9700\u8981\u5206\u9875\u5668 -->\n           <div class=\"swiper-pagination\"><\/div>\n           \n          <\/div>`,\n\n          updated(){\n            console.log(\"\u65b0\u7684\u6570\u636e\u63d2\u5165\u63d2\u69fd\u4e86\")\n            new Swiper ('.kerwin',{\n              pagination: {\n                 el: '.swiper-pagination',\n               },\n               \/\/ direction: 'vertical', \n              loop: true,\n              autoplay: {\n                delay: 2500,\n                disableOnInteraction: false,\n              }\n            })\n          }\n        })\n\t\t    \n\n        var vm = new Vue({\n          el:\"#box\",\n          data:{\n            datalist:[]\n          },\n\n          mounted(){\n          \t\/\/ setTimeout(() => {\n          \t\/\/   \tthis.datalist=[\"111\",\"222\",\"333\"]\n           \/\/      \/\/\u6570\u636e\u66f4\u65b0\u5b8c\u4e86  === dom\u66f4\u65b0\u5b8c\u4e86\u5417\uff1f no \u8fd9\u4e2a\u8fc7\u7a0b\u662f\u5f02\u6b65\n                \n           \/\/      \/\/ var oslide= document.querySelector(\".swiper-slide\");\n           \/\/      \/\/ console.log(oslide);\n          \t\/\/ }, 2000)\n            \n            axios({\n              url:\"https:\/\/m.maizuo.com\/gateway?type=2&cityId=110100&k=97815\",\n              headers:{\n                'X-Client-Info': '{\"a\":\"3000\",\"ch\":\"1002\",\"v\":\"5.0.4\",\"e\":\"154277371928424093566579\"}',\n                'X-Host': 'mall.cfg.common-banner'\n              }\n            }).then(res=>{\n              console.log(res.data);\n              this.datalist= res.data.data\n            }) \n          }\n        })\n\n    <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
01-swiper-\u9759\u6001 <!DOCTYPE html> <html> <head> < …<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[],"tags":[9,10],"_links":{"self":[{"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/posts\/552"}],"collection":[{"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/comments?post=552"}],"version-history":[{"count":0,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/posts\/552\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/media?parent=552"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/categories?post=552"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/tags?post=552"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}