{"id":29431,"date":"2024-11-25T08:07:24","date_gmt":"2024-11-25T00:07:24","guid":{"rendered":"https:\/\/fwq.ai\/blog\/29431\/"},"modified":"2024-11-25T08:07:24","modified_gmt":"2024-11-25T00:07:24","slug":"%e8%af%a6%e8%a7%a3%e5%be%ae%e4%bf%a1%e5%b0%8f%e7%a8%8b%e5%ba%8f%e7%bb%84%e4%bb%b6%ef%bc%9aslider%e6%bb%91%e5%8a%a8%e9%80%89%e6%8b%a9%e5%99%a8","status":"publish","type":"post","link":"https:\/\/fwq.ai\/blog\/29431\/","title":{"rendered":"\u8be6\u89e3\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u7ec4\u4ef6\uff1aslider\u6ed1\u52a8\u9009\u62e9\u5668"},"content":{"rendered":"

slider\u6ed1\u52a8\u9009\u62e9\u5668\u7ec4\u4ef6\u8bf4\u660e:<\/p>\n

\u6ed1\u52a8\u9009\u62e9\u5668\u3002<\/p>\n

slider\u6ed1\u52a8\u9009\u62e9\u5668\u793a\u4f8b\u4ee3\u7801\u8fd0\u884c\u6548\u679c\u5982\u4e0b\uff1a<\/p>\n

\"\u8be6\u89e3\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u7ec4\u4ef6\uff1aslider\u6ed1\u52a8\u9009\u62e9\u5668\u63d2\u56fe\"<\/p>\n

\u4e0b\u9762\u662fWXML\u4ee3\u7801\uff1a<\/p>\n

<view class=\"section section_gap\">\r\n  <text class=\"section__title\">\u8bbe\u7f6eleft\/right icon<\/text>\r\n  <view class=\"body-view\">\r\n    <slider bindchange=\"slider1change\" left-icon=\"cancel\" right-icon=\"success_no_circle\"\/>\r\n  <\/view>\r\n<\/view>\r\n<view class=\"section section_gap\">\r\n  <text class=\"section__title\">\u8bbe\u7f6estep<\/text>\r\n  <view class=\"body-view\">\r\n    <slider bindchange=\"slider2change\" step=\"5\"\/>\r\n  <\/view>\r\n<\/view>\r\n<view class=\"section section_gap\">\r\n  <text class=\"section__title\">\u663e\u793a\u5f53\u524dvalue<\/text>\r\n  <view class=\"body-view\">\r\n    <slider bindchange=\"slider3change\" show-value\/>\r\n  <\/view>\r\n<\/view>\r\n<view class=\"section section_gap\">\r\n  <text class=\"section__title\">\u8bbe\u7f6e\u6700\u5c0f\/\u6700\u5927\u503c<\/text>\r\n  <view class=\"body-view\">\r\n    <slider bindchange=\"slider4change\" min=\"50\" max=\"200\" show-value\/>\r\n  <\/view>\r\n<\/view><\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
\u4e0b\u9762\u662fJS\u4ee3\u7801\uff1a<\/p>\n
var pageData = {}\r\nfor (var i = 1; i < 5; i++) {\r\n  (function (index) {\r\n    pageData['slider' + index + 'change'] = function(e) {\r\n      console.log('slider' + 'index' + '\u53d1\u751f change \u4e8b\u4ef6\uff0c\u643a\u5e26\u503c\u4e3a', e.detail.value)\r\n    }\r\n  })(i)\r\n}\r\nPage(pageData)<\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236    \u767b\u5f55\u540e\u590d\u5236    \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
\u4e0b\u9762\u662fWXSS\u4ee3\u7801\uff1a<\/p>\n
.page {\r\n    min-height: 100%;\r\n    flex: 1;\r\n    background-color: #FBF9FE;\r\n    font-size: 32rpx;\r\n    overflow: hidden;\r\n}<\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236    \u767b\u5f55\u540e\u590d\u5236    \u767b\u5f55\u540e\u590d\u5236    \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
slider\u6ed1\u52a8\u9009\u62e9\u5668\u7684\u4e3b\u8981\u5c5e\u6027<\/p>\n
\u5c5e\u6027\u540d<\/p>\n
\u7c7b\u578b<\/p>\n
\u9ed8\u8ba4\u503c<\/p>\n
\u8bf4\u660e<\/p>\n
minNumber0\u6700\u5c0f\u503c
maxNumber100\u6700\u5927\u503c
stepNumber1\u6b65\u957f\uff0c\u53d6\u503c\u5fc5\u987b\u5927\u4e8e0\uff0c\u5e76\u4e14\u53ef\u88ab(max – min)\u6574\u9664
disabledBooleanfalse\u662f\u5426\u7981\u7528
valueNumber0\u5f53\u524d\u53d6\u503c
show-valueBooleanfalse\u662f\u5426\u663e\u793a\u5f53\u524d value
bindchangeEventHandle\u5b8c\u6210\u4e00\u6b21\u62d6\u52a8\u540e\u89e6\u53d1\u7684\u4e8b\u4ef6\uff0cevent.detail = {value: value}\u4e2a\u4eba\u7ecf\u9a8c:min\u4e3a\u8d1f\u6570<\/p>\n
\u6ed1\u52a8\u9009\u62e9\u5668\u3002
\u65e2\u7136min\u548cmax\u662fNumber\u7c7b\u578b\uff0c\u90a3\u4e48\u5c06min\u8bbe\u7f6e\u4e3a\u8d1f\u6570\u662f\u5426\u53ef\u4ee5\uff1f<\/p>\n
\"\u8be6\u89e3\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u7ec4\u4ef6\uff1aslider\u6ed1\u52a8\u9009\u62e9\u5668\u63d2\u56fe1\"<\/p>\n
\u4e0b\u9762\u662fWXML\u4ee3\u7801\uff1a<\/p>\n
<view class=\"section section_gap\">\r\n  <text class=\"section__title\">\u8bbe\u7f6e\u6700\u5c0f\/\u6700\u5927\u503c<\/text>\r\n  <view class=\"body-view\">\r\n    <slider bindchange=\"slider4change\" min=\"-10\" max=\"20\" show-value\/>\r\n  <\/view>\r\n<\/view><\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
\u4e0b\u9762\u662fJS\u4ee3\u7801\uff1a<\/p>\n
var pageData = {}\r\nfor (var i = 1; i < 5; i++) {\r\n  (function (index) {\r\n    pageData['slider' + index + 'change'] = function(e) {\r\n      console.log('slider' + 'index' + '\u53d1\u751f change \u4e8b\u4ef6\uff0c\u643a\u5e26\u503c\u4e3a', e.detail.value)\r\n    }\r\n  })(i)\r\n}\r\nPage(pageData)<\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236    \u767b\u5f55\u540e\u590d\u5236    \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
\u4e0b\u9762\u662fWXSS\u4ee3\u7801\uff1a<\/p>\n
.page {\r\n    min-height: 100%;\r\n    flex: 1;\r\n    background-color: #FBF9FE;\r\n    font-size: 32rpx;\r\n    overflow: hidden;\r\n}<\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236    \u767b\u5f55\u540e\u590d\u5236    \u767b\u5f55\u540e\u590d\u5236    \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
\u5206\u6790\uff1a\u53ef\u4ee5\u770b\u5230min\u53ef\u4ee5\u8bbe\u7f6e\u4e3a\u8d1f\u6570\uff0c\u800c\u4e14\uff0c\u9ed8\u8ba4\u6ed1\u5757\u663e\u793a\u52300\u7684\u4f4d\u7f6e\uff08\u8bf4\u660evalue\u8fd9\u4e2a\u5c5e\u6027\u662f\u63a7\u5236\u8fd9\u4e2a\u7684\uff09\u3002\u7136\u540e\u8fd8\u53ef\u4ee5\u5f80\u5de6\u62d6\u52a8\uff0c\u7136\u540e\u663e\u793a\u51fa\u8d1f\u6570\uff1b<\/p>\n
\u4e2a\u4eba\u7ecf\u9a8c:min\u5982\u679c\u5927\u4e8emax<\/p>\n
\u6211\u4ee5\u4e3a\u4f1a\u62a5\u9519\uff0c\u7ed3\u679c\u51fa\u4e4e\u6211\u7684\u610f\u6599\u3002\u5b83\u5c45\u7136\u4e0d\u62a5\u9519\uff0c\u7136\u540e\u663e\u793a\u5230max\u4f4d\u7f6e\uff0c\u6ed1\u5757\u4e5f\u662f\u4e0d\u80fd\u591f\u62d6\u52a8\u7684\u3002\u8fd9\u662f\u4e00\u4e2a\u660e\u663e\u7684\u5927\u5751\u554a\uff01<\/p>\n
\"\u8be6\u89e3\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u7ec4\u4ef6\uff1aslider\u6ed1\u52a8\u9009\u62e9\u5668\u63d2\u56fe2\"<\/p>\n
\u4e0b\u9762\u662fWXML\u4ee3\u7801\uff1a<\/p>\n
<view class=\"section section_gap\">\r\n  <text class=\"section__title\">\u8bbe\u7f6e\u6700\u5c0f\/\u6700\u5927\u503c<\/text>\r\n  <view class=\"body-view\">\r\n    <slider bindchange=\"slider4change\" min=\"100\" max=\"20\" show-value\/>\r\n  <\/view>\r\n<\/view><\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
\u4e0b\u9762\u662fJS\u4ee3\u7801\uff1a<\/p>\n
var pageData = {}\r\nfor (var i = 1; i < 5; i++) {\r\n  (function (index) {\r\n    pageData['slider' + index + 'change'] = function(e) {\r\n      console.log('slider' + 'index' + '\u53d1\u751f change \u4e8b\u4ef6\uff0c\u643a\u5e26\u503c\u4e3a', e.detail.value)\r\n    }\r\n  })(i)\r\n}\r\nPage(pageData)<\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236    \u767b\u5f55\u540e\u590d\u5236    \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
\u4e0b\u9762\u662fWXSS\u4ee3\u7801\uff1a<\/p>\n
.page {\r\n    min-height: 100%;\r\n    flex: 1;\r\n    background-color: #FBF9FE;\r\n    font-size: 32rpx;\r\n    overflow: hidden;\r\n}<\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236    \u767b\u5f55\u540e\u590d\u5236    \u767b\u5f55\u540e\u590d\u5236    \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
\u8fd9\u4e2a\u63a7\u4ef6\u4f30\u8ba1\u540e\u9762\u4f1a\u6539\u5427\u3002\u8bf7\u5927\u5bb6\u907f\u514d\u8fd9\u4e2a\u5751\u3002
\u53e6\u5916\uff0cmax\u8fd8\u53ef\u4ee5\u548cmin\u76f8\u7b49\u3002<\/p>\n
\u4e2a\u4eba\u7ecf\u9a8c:\u4e24\u4e2a\u6ed1\u5757<\/p>\n
\u6211\u4e4b\u524d\u7528\u8fc7slider\uff0c\u4eba\u5bb6\u6ed1\u5757\u53ef\u4ee5\u662f\u8bbe\u7f6e\u4e24\u4e2a\u7684\u3002\u8fd9\u4e2a\u6587\u6863\u4e0a\u6ca1\u5199\uff0c\u6211\u4e5f\u662f\u591f\u4e86\uff0c\u53ea\u80fd\u8bf4\u4e0d\u6210\u719f\u5427\u3002<\/p>\n
\u4e2a\u4eba\u7ecf\u9a8c:\u4f7f\u7528wx.showToast\u663e\u793avalue<\/p>\n
\"\u8be6\u89e3\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u7ec4\u4ef6\uff1aslider\u6ed1\u52a8\u9009\u62e9\u5668\u63d2\u56fe3\"<\/p>\n
\u9664\u4e86\u9ed8\u8ba4\u7684\u663e\u793a\u65b9\u5f0f\uff0c\u6211\u4eec\u8fd8\u53ef\u4ee5\u7528toast\u65b9\u5f0f\u663e\u793a\u9009\u62e9\u7684\u503c
\u4e0b\u9762\u662fWXML\u4ee3\u7801\uff1a<\/p>\n
<view class=\"section section_gap\">\r\n  <text class=\"section__title\">\u4f7f\u7528toast\u663e\u793a\u5f53\u524dvalue<\/text>\r\n  <view class=\"body-view\">\r\n    <slider bindchange=\"slider3change\"  min=\"0\" max=\"20\" step=\"5\" \/>\r\n  <\/view>\r\n<\/view><\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
\u4e0b\u9762\u662fJS\u4ee3\u7801\uff1a<\/p>\n
var pageData = {}\r\nfor (var i = 1; i < 5; i++) {\r\n  (function (index) {\r\n    pageData['slider' + index + 'change'] = function(e) {\r\n      console.log('slider' + 'index' + '\u53d1\u751f change \u4e8b\u4ef6\uff0c\u643a\u5e26\u503c\u4e3a', e.detail.value)\r\n      wx.showToast({\r\n        title: '\u60a8\u9009\u62e9\u4e86'+ e.detail.value,\r\n        icon: 'success',\r\n        duration: 2000\r\n      })\r\n    }\r\n  })(i)\r\n}\r\nPage(pageData)<\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
\u4e0b\u9762\u662fWXSS\u4ee3\u7801\uff1a<\/p>\n
.page {\r\n    min-height: 100%;\r\n    flex: 1;\r\n    background-color: #FBF9FE;\r\n    font-size: 32rpx;\r\n    overflow: hidden;\r\n}<\/pre>\n
  \u767b\u5f55\u540e\u590d\u5236    \u767b\u5f55\u540e\u590d\u5236    \u767b\u5f55\u540e\u590d\u5236    \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
\u4ee5\u4e0a\u5c31\u662f\u8be6\u89e3\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u7ec4\u4ef6\uff1aslider\u6ed1\u52a8\u9009\u62e9\u5668\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":"
slider\u6ed1\u52a8\u9009\u62e9\u5668\u7ec4\u4ef6\u8bf4\u660e: \u6ed1\u52a8\u9009\u62e9\u5668\u3002 slider\u6ed1\u52a8\u9009\u62e9\u5668\u793a\u4f8b\u4ee3\u7801\u8fd0\u884c\u6548\u679c\u5982\u4e0b\uff1a \u4e0b\u9762\u662fWXML\u4ee3\u7801\uff1a <view class=”section section_gap”> <text class=”section__title”>\u8bbe\u7f6eleft\/right icon<\/text> <view class=”body-view”> <slider bindchange=”slider1change” left-icon=”cancel” right-icon=”success_no_circle”\/> <\/view> <\/view> <view class=”section section_gap”> <text class=”section__title”>\u8bbe\u7f6estep<\/text> <view class=”body-view”> <slider bindchange=”slider2change” step=”5″\/> <\/view> <\/view> <view class=”section section_gap”> <text class=”section__title”>\u663e\u793a\u5f53\u524dvalue<\/text> <view class=”body-view”> <slider bindchange=”slider3change” show-value\/> <\/view> <\/view> <view class=”section section_gap”> <text class=”section__title”>\u8bbe\u7f6e\u6700\u5c0f\/\u6700\u5927\u503c<\/text> <view class=”body-view”> <slider bindchange=”slider4change” min=”50″ max=”200″ show-value\/> <\/view> […]<\/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-29431","post","type-post","status-publish","format-standard","hentry","category-19"],"_links":{"self":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/29431","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=29431"}],"version-history":[{"count":0,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/29431\/revisions"}],"wp:attachment":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/media?parent=29431"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/categories?post=29431"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/tags?post=29431"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}