{"id":32002,"date":"2024-11-25T12:53:58","date_gmt":"2024-11-25T04:53:58","guid":{"rendered":"https:\/\/fwq.ai\/blog\/32002\/"},"modified":"2024-11-25T12:53:58","modified_gmt":"2024-11-25T04:53:58","slug":"%e5%85%b3%e4%ba%8e%e5%be%ae%e4%bf%a1%e5%b0%8f%e7%a8%8b%e5%ba%8f%e5%ae%9e%e7%8e%b0%e9%a1%b6%e9%83%a8%e9%80%89%e9%a1%b9%e5%8d%a1swiper%e7%9a%84%e4%bb%8b%e7%bb%8d","status":"publish","type":"post","link":"https:\/\/fwq.ai\/blog\/32002\/","title":{"rendered":"\u5173\u4e8e\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5b9e\u73b0\u9876\u90e8\u9009\u9879\u5361(swiper)\u7684\u4ecb\u7ecd"},"content":{"rendered":"

\u8fd9\u7bc7\u6587\u7ae0\u4e3b\u8981\u4e3a\u5927\u5bb6\u8be6\u7ec6\u4ecb\u7ecd\u4e86\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5b9e\u73b0\u9876\u90e8\u9009\u9879\u5361\u6548\u679c\uff0c\u5177\u6709\u4e00\u5b9a\u7684\u53c2\u8003\u4ef7\u503c\uff0c\u611f\u5174\u8da3\u7684\u5c0f\u4f19\u4f34\u4eec\u53ef\u4ee5\u53c2\u8003\u4e00\u4e0b<\/p>\n

\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u9876\u90e8\u9009\u9879\u5361\u5728\u5f00\u53d1\u4e2d\u662f\u975e\u5e38\u5e38\u7528\u7684\uff0c\u4e0b\u9762\u7528\u4e00\u70b9\u65f6\u95f4\u5b9e\u73b0\u4e86\u4e00\u4e0b\u3002<\/p>\n

\u6548\u679c\u56fe\uff1a<\/p>\n

\"\u5173\u4e8e\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5b9e\u73b0\u9876\u90e8\u9009\u9879\u5361(swiper)\u7684\u4ecb\u7ecd\u63d2\u56fe\"<\/p>\n

\u4e0b\u9762\u76f4\u63a5\u4e0a\u4ee3\u7801:<\/p>\n

wxml:<\/p>\n<\/p>\n

<!--pages\/index\/index.wxml--> \n<view> \n <view>\u9009\u9879\u4e00<\/view> \n <view>\u9009\u9879\u4e8c<\/view> \n <view>\u9009\u9879\u4e09<\/view> \n<\/view> \n \n<swiper> \n <swiper-item> \n  <view>\u9875\u9762\u4e00<\/view> \n <\/swiper-item> \n <swiper-item> \n  <view>\u9875\u9762\u4e8c<\/view> \n <\/swiper-item> \n <swiper-item> \n  <view>\u9875\u9762\u4e09<\/view> \n <\/swiper-item> \n<\/swiper><\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
wxss:<\/p>\n<\/p>\n
\/* pages\/index\/index.wxss *\/ \n.swiper-tab{ \n width: 100%; \n text-align: center; \n line-height: 80rpx; \n border-bottom: 1px solid #000; \n display: flex; \n flex-direction: row; \n justify-content: center; \n} \n.tab-item{ \n flex: 1; \n font-size: 30rpx; \n display: inline-block;  \n color: #777777; \n} \n.on{ \n color: red; \n border-bottom: 5rpx solid red; \n} \n.swiper{ display: block; height: 100%; width: 100%; overflow: hidden; } \n.swiper view{ \n text-align: center; \n padding-top: 100rpx; \n}<\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
js:<\/p>\n<\/p>\n
\/\/ pages\/index\/index.js \nPage({ \n \n \/** \n  * \u9875\u9762\u7684\u521d\u59cb\u6570\u636e \n  *\/ \n data: { \n  winWidth:0, \n  winHeight:0, \n  currentTab:0 \n }, \n \n \/** \n  * \u751f\u547d\u5468\u671f\u51fd\u6570--\u76d1\u542c\u9875\u9762\u52a0\u8f7d \n  *\/ \n onLoad: function (options) { \n  var that = this; \n \n  \/** \n   * \u83b7\u53d6\u7cfb\u7edf\u4fe1\u606f \n   *\/ \n  wx.getSystemInfo({ \n \n   success: function (res) { \n    that.setData({ \n     winWidth: res.windowWidth, \n     winHeight: res.windowHeight \n    }); \n   } \n \n  }); \n }, \n bindChange: function (e) { \n \n  var that = this; \n  that.setData({ currentTab: e.detail.current }); \n \n }, \n swichNav: function (e) { \n \n  var that = this; \n \n  if (this.data.currentTab === e.target.dataset.current) { \n   return false; \n  } else { \n   that.setData({ \n    currentTab: e.target.dataset.current \n   }) \n  } \n } , \n \/** \n  * \u9875\u9762\u76f8\u5173\u4e8b\u4ef6\u5904\u7406\u51fd\u6570--\u76d1\u542c\u7528\u6237\u4e0b\u62c9\u52a8\u4f5c \n  *\/ \n onPullDownRefresh: function () { \n \n }, \n \n \/** \n  * \u9875\u9762\u4e0a\u62c9\u89e6\u5e95\u4e8b\u4ef6\u7684\u5904\u7406\u51fd\u6570 \n  *\/ \n onReachBottom: function () { \n \n }, \n \n \/** \n  * \u7528\u6237\u70b9\u51fb\u53f3\u4e0a\u89d2\u5206\u4eab \n  *\/ \n onShareAppMessage: function () { \n \n } \n})<\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
\u4ee5\u4e0a\u662f\u5b9e\u73b0\u8fc7\u7a0b\uff0c\u603b\u4f53\u4e0a\u6ca1\u4ec0\u4e48\u96be\u5ea6\u3002\u53ef\u4ee5\u53c2\u8003\u53c2\u8003\u3002<\/p>\n
\u4ee5\u4e0a\u5c31\u662f\u672c\u6587\u7684\u5168\u90e8\u5185\u5bb9\uff0c\u5e0c\u671b\u5bf9\u5927\u5bb6\u7684\u5b66\u4e60\u6709\u6240\u5e2e\u52a9\uff0c\u66f4\u591a\u76f8\u5173\u5185\u5bb9\u8bf7\u5173\u6ce8PHP\u4e2d\u6587\u7f51\uff01<\/p>\n
\u76f8\u5173\u63a8\u8350\uff1a<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n<\/p>\n
<\/span><\/p>\n
\u4ee5\u4e0a\u5c31\u662f\u5173\u4e8e\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5b9e\u73b0\u9876\u90e8\u9009\u9879\u5361(swiper)\u7684\u4ecb\u7ecd\u7684\u8be6\u7ec6\u5185\u5bb9\uff0c\u66f4\u591a\u8bf7\u5173\u6ce8\u7c73\u4e91\u5176\u5b83\u76f8\u5173\u6587\u7ae0\uff01<\/p>\n","protected":false},"excerpt":{"rendered":"
\u8fd9\u7bc7\u6587\u7ae0\u4e3b\u8981\u4e3a\u5927\u5bb6\u8be6\u7ec6\u4ecb\u7ecd\u4e86\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5b9e\u73b0\u9876\u90e8\u9009\u9879\u5361\u6548\u679c\uff0c\u5177\u6709\u4e00\u5b9a\u7684\u53c2\u8003\u4ef7\u503c\uff0c\u611f\u5174\u8da3\u7684\u5c0f\u4f19\u4f34\u4eec\u53ef\u4ee5\u53c2\u8003\u4e00\u4e0b \u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u9876\u90e8\u9009\u9879\u5361\u5728\u5f00\u53d1\u4e2d\u662f\u975e\u5e38\u5e38\u7528\u7684\uff0c\u4e0b\u9762\u7528\u4e00\u70b9\u65f6\u95f4\u5b9e\u73b0\u4e86\u4e00\u4e0b\u3002 \u6548\u679c\u56fe\uff1a \u4e0b\u9762\u76f4\u63a5\u4e0a\u4ee3\u7801: wxml: <!–pages\/index\/index.wxml–>  <view>   <view>\u9009\u9879\u4e00<\/view>   <view>\u9009\u9879\u4e8c<\/view>   <view>\u9009\u9879\u4e09<\/view>  <\/view>    <swiper>   <swiper-item>    <view>\u9875\u9762\u4e00<\/view>   <\/swiper-item>   <swiper-item>    <view>\u9875\u9762\u4e8c<\/view>   <\/swiper-item>   <swiper-item>    <view>\u9875\u9762\u4e09<\/view>   <\/swiper-item>  <\/swiper> \u767b\u5f55\u540e\u590d\u5236 wxss: \/* pages\/index\/index.wxss *\/  .swiper-tab{   width: 100%;   text-align: center;   line-height: 80rpx;   border-bottom: 1px solid #000;   display: flex;   flex-direction: row;   justify-content: center;  }  .tab-item{   flex: 1;   font-size: 30rpx;   display: inline-block;    color: #777777;  }  .on{   color: red;   border-bottom: 5rpx solid red;  }  .swiper{ display: block; height: 100%; width: 100%; overflow: hidden; }  .swiper view{   text-align: center;   padding-top: 100rpx;  } \u767b\u5f55\u540e\u590d\u5236 js: \/\/ pages\/index\/index.js  Page({    […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19],"tags":[],"class_list":["post-32002","post","type-post","status-publish","format-standard","hentry","category-19"],"_links":{"self":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/32002","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/comments?post=32002"}],"version-history":[{"count":0,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/32002\/revisions"}],"wp:attachment":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/media?parent=32002"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/categories?post=32002"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/tags?post=32002"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}