{"id":9007,"date":"2022-11-16T10:02:52","date_gmt":"2022-11-16T02:02:52","guid":{"rendered":"https:\/\/sdeno.com\/?p=9007"},"modified":"2024-02-27T10:30:40","modified_gmt":"2024-02-27T02:30:40","slug":"vue%e6%bb%9a%e5%8a%a8vue-seamless-scroll","status":"publish","type":"post","link":"https:\/\/sdeno.com\/?p=9007","title":{"rendered":"vue\u6eda\u52a8vue-seamless-scroll"},"content":{"rendered":"<p><a href=\"https:\/\/chenxuan0000.github.io\/vue-seamless-scroll\/guide\/\" target=\"_blank\" rel=\"noopener\">https:\/\/chenxuan0000.github.io\/vue-seamless-scroll\/guide\/<\/a><\/p>\n<p>\u672c\u5730\u6587\u6863\uff1a<a href=\"https:\/\/sdeno.com\/wp-content\/uploads\/2022\/11\/vue-seamless-scroll\/chenxuan0000.github.io\/vue-seamless-scroll\/guide\/index.html\" target=\"_blank\" rel=\"noopener\">\u5730\u57401<\/a><\/p>\n<p>&nbsp;<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">import vueSeamlessScroll from 'vue-seamless-scroll\/src';\r\n\r\nexport default {\r\n  name: \"index\",\r\n  components: {\r\n    vueSeamlessScroll\r\n  },\r\n  data(){\r\n     return:{\r\n     listData:[\r\n        {\r\n          title:'111',\r\n          date:'12211',\r\n        },\r\n        {\r\n          title:'111',\r\n          date:'12211',\r\n        },\r\n        {\r\n          title:'111',\r\n          date:'12211',\r\n        },\r\n        {\r\n          title:'111',\r\n          date:'12211',\r\n        },{\r\n          title:'111',\r\n          date:'12211',\r\n        },\r\n        {\r\n          title:'111',\r\n          date:'12211',\r\n        },\r\n        {\r\n          title:'111',\r\n          date:'12211',\r\n        },\r\n        {\r\n          title:'111',\r\n          date:'12211',\r\n        },\r\n      ]\r\n     }\r\n  }\r\n}\r\n\r\n                &lt;div class=\"scroll-title\" style=\"display: flex\"&gt;\r\n                  &lt;div&gt;\u6392\u540d&lt;\/div&gt;\r\n                  &lt;div&gt;\u79d1\u5ba4&lt;\/div&gt;\r\n                  &lt;div&gt;\u4eba\u6b21&lt;\/div&gt;\r\n                  &lt;div&gt;\u5360\u6bd4(%)&lt;\/div&gt;\r\n                &lt;\/div&gt;\r\n                &lt;vue-seamless-scroll :data=\"listData\" class=\"seamless-scrollwarp\"&gt;\r\n                  &lt;ul class=\"item\"&gt;\r\n                    &lt;li v-for=\"(item, index) in listData\" :key=\"index\"&gt;\r\n                      &lt;span class=\"title\" v-text=\"item.title\"&gt;&lt;\/span&gt;\r\n                      &lt;span class=\"date\" v-text=\"item.date\"&gt;&lt;\/span&gt;\r\n                      &lt;span class=\"date\" v-text=\"item.date\"&gt;&lt;\/span&gt;\r\n                      &lt;span class=\"date\" v-text=\"item.date\"&gt;&lt;\/span&gt;\r\n                    &lt;\/li&gt;\r\n                  &lt;\/ul&gt;\r\n                &lt;\/vue-seamless-scroll&gt;\r\n\r\n\r\n.scroll-title{\r\n    display: flex;\r\n    &amp;&gt;div{\r\n      flex: 1;\r\n      text-align: center;\r\n    }\r\n  }\r\n\r\n  .seamless-scrollwarp {\r\n    height: 230px;\r\n    margin: 0 auto;\r\n    overflow: hidden;\r\n    ul {\r\n      list-style: none;\r\n      padding: 0;\r\n      margin: 0 auto;\r\n      li,\r\n      a {\r\n        height: 30px;\r\n        line-height: 30px;\r\n        display: flex;\r\n        justify-content: space-between;\r\n        font-size: 15px;\r\n        span{\r\n          flex: 1;\r\n          text-align: center;\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n\r\n<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>https:\/\/chenxuan0000.github.io\/vue-seamless-scroll\/guid [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-9007","post","type-post","status-publish","format-standard","hentry","category-wordpress"],"_links":{"self":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts\/9007","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=9007"}],"version-history":[{"count":0,"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts\/9007\/revisions"}],"wp:attachment":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=9007"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=9007"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=9007"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}