init

xhs-mini-demos/component-case/picker-view/picker-view.css

@@ -0,0 +1,20 @@
+.selected-date {
+  text-align: center;
+  margin: 15px;
+}
+
+.icon-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.picker-icon {
+  width: 25px;
+  height: 25px;
+}
+
+._dflex > button {
+  margin: 10px 0;
+}

xhs-mini-demos/component-case/picker-view/picker-view.js

@@ -0,0 +1,77 @@
+const __templateJs = require("./templates.js");
+const __mergePageOptions = require("../../util/mergePageOptions.js");
+const date = new Date();
+const years = [];
+const months = [];
+const mapDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+const days = [];
+for (let i = 1990; i <= date.getFullYear(); i++) {
+  years.push(i);
+}
+for (let i = 1; i <= 12; i++) {
+  months.push(i);
+}
+for (let i = 0; i <= mapDays.length; i++) {
+  days.push(new Array(mapDays[i]).fill(0).map((item, index) => index + 1));
+}
+Page(__mergePageOptions({
+  onShareAppMessage() {
+    return {
+      title: 'picker-view',
+      path: 'page/component/pages/picker-view/picker-view'
+    };
+  },
+  data: {
+    years,
+    year: date.getFullYear(),
+    months,
+    month: 2,
+    days,
+    day: 2,
+    value: [9999, 1, 1],
+    isDaytime: true,
+    indicatorStyle: 'height: 50px;',
+    maskStyle: '',
+    bindpickstartTime: '',
+    bindpickendTime: '',
+    daysMap: {
+      0: [1, 2],
+      1: [1, 2, 3, 4],
+      2: [1, 2, 3, 4, 5, 6]
+    }
+  },
+  setDefaultValue() {
+    this.setData({
+      value: [1, 1, 1]
+    });
+  },
+  setChangeIndicatorHeight() {
+    this.setData({
+      indicatorStyle: 'height: 70px;'
+    });
+  },
+  setChangeMaskStyle() {
+    this.setData({
+      maskStyle: 'background-image: none;'
+    });
+  },
+  bindChange(e) {
+    const val = e.detail.value;
+    this.setData({
+      year: this.data.years[val[0]],
+      month: this.data.months[val[1]],
+      day: this.data.days[val[1]][val[2]],
+      isDaytime: !val[3]
+    });
+  },
+  bindpickstart(e) {
+    this.setData({
+      bindpickstartTime: e.timeStamp
+    });
+  },
+  bindpickend(e) {
+    this.setData({
+      bindpickendTime: e.timeStamp
+    });
+  }
+}, __templateJs));

xhs-mini-demos/component-case/picker-view/picker-view.json

@@ -0,0 +1,7 @@
+{
+  "navigationBarTitleText": "滚动选择器",
+  "usingComponents": {
+      "showbox": "../../common/component/showbox/index",
+      "box": "../../common/component/container/index"
+  }
+}

xhs-mini-demos/component-case/picker-view/picker-view.xhsml

@@ -0,0 +1,41 @@
+<view class="container">
+  <showbox title="基础使用">
+    <box>
+      <view>当前选择: {{year}}年{{month}}月{{day}}日{{isDaytime ? "白天" : "夜晚"}}</view>
+      <view class="_my8">
+        <picker-view
+          indicator-style="{{indicatorStyle}}"
+          mask-style="{{maskStyle}}"
+          style="width: 100%; height: 300px;"
+          value="{{value}}"
+          bindchange="bindChange"
+          bindpickstart="bindpickstart"
+          bindpickend="bindpickend"
+    
+        >
+          <picker-view-column>
+            <view xhs:for="{{years}}" style="line-height: 50px; text-align: center;color:black;">{{item}}年</view>
+          </picker-view-column>
+          <picker-view-column>
+            <view xhs:for="{{months}}" style="line-height: 50px; text-align: center;color:black;">{{item}}月</view>
+          </picker-view-column>
+          <picker-view-column>
+            <block  xhs:for="{{days[value[1]]}}">
+              <view style="line-height: 50px; text-align: center;color:black;">{{item}}日</view>
+            </block>
+          </picker-view-column>
+          <picker-view-column>
+            <view class="icon-container">
+              白天
+            </view>
+            <view class="icon-container">
+              黑夜
+            </view>
+          </picker-view-column>
+        </picker-view>
+      </view>
+    </box>
+  </showbox>
+</view>
+
+<include src="templates.xhsml" />

xhs-mini-demos/component-case/picker-view/templates.js

@@ -0,0 +1,41 @@
+/** 以下内容为自动生成，请勿手动修改 */
+
+module.exports = {
+  data: {
+    page_data_0: `2,1,1`,
+
+    page_data_1: `height: 50px;`,
+
+    page_data_2: ``,
+
+    page_data_3: ``,
+
+    page_data_4: ``,
+
+    page_data_5: "width: 100%; height: 300px;",
+  },
+
+  page_fun_0(e) {
+    this.setData("page_data_0", e.detail.value);
+  },
+
+  page_fun_1(e) {
+    this.setData("page_data_1", e.detail.value);
+  },
+
+  page_fun_2(e) {
+    this.setData("page_data_2", e.detail.value);
+  },
+
+  page_fun_3(e) {
+    this.setData("page_data_3", e.detail.value);
+  },
+
+  page_fun_4(e) {
+    this.setData("page_data_4", e.detail.value);
+  },
+
+  page_fun_5(e) {
+    this.setData("page_data_5", e.detail.value);
+  },
+};

xhs-mini-demos/component-case/picker-view/templates.xhsml

@@ -0,0 +1,131 @@
+<!-- 以下内容为自动生成，请勿手动修改 -->
+
+<view class="container">
+  <showbox title="picker-view演示">
+    <box>
+      <view class="_ui-space">
+        <view>
+          <picker-view
+            value="{{page_data_0}}"
+            indicator-style="{{page_data_1}}"
+            indicator-class="{{page_data_2}}"
+            mask-style="{{page_data_3}}"
+            mask-class="{{page_data_4}}"
+            style="{{page_data_5}}"
+          >
+            <picker-view-column>
+              <view
+                xhs:for="{{years}}"
+                style="line-height: 50px; text-align: center; color: black"
+                >{{item}}年</view
+              >
+            </picker-view-column>
+            <picker-view-column>
+              <view
+                xhs:for="{{months}}"
+                style="line-height: 50px; text-align: center; color: black"
+                >{{item}}月</view
+              >
+            </picker-view-column>
+            <picker-view-column>
+              <block xhs:for="{{days[value[1]]}}">
+                <view
+                  style="line-height: 50px; text-align: center; color: black"
+                  >{{item}}日</view
+                >
+              </block>
+            </picker-view-column>
+            <picker-view-column>
+              <view class="icon-container"> 白天 </view>
+              <view class="icon-container"> 黑夜 </view>
+            </picker-view-column>
+          </picker-view>
+        </view>
+
+        <view class="_dflex">
+          <view style="flex: 4" class="_dflex _ai_center"
+            ><text>value</text></view
+          >
+          <view style="flex: 6" class="_ui-input">
+            <input
+              value="{{page_data_0}}"
+              placeholder="value"
+              type="text"
+              bindinput="page_fun_0"
+            />
+          </view>
+        </view>
+
+        <view class="_dflex">
+          <view style="flex: 4" class="_dflex _ai_center"
+            ><text>indicatorStyle</text></view
+          >
+          <view style="flex: 6" class="_ui-input">
+            <input
+              value="{{page_data_1}}"
+              placeholder="indicatorStyle"
+              type="text"
+              bindinput="page_fun_1"
+            />
+          </view>
+        </view>
+
+        <view class="_dflex">
+          <view style="flex: 4" class="_dflex _ai_center"
+            ><text>indicatorClass</text></view
+          >
+          <view style="flex: 6" class="_ui-input">
+            <input
+              value="{{page_data_2}}"
+              placeholder="indicatorClass"
+              type="text"
+              bindinput="page_fun_2"
+            />
+          </view>
+        </view>
+
+        <view class="_dflex">
+          <view style="flex: 4" class="_dflex _ai_center"
+            ><text>maskStyle</text></view
+          >
+          <view style="flex: 6" class="_ui-input">
+            <input
+              value="{{page_data_3}}"
+              placeholder="maskStyle"
+              type="text"
+              bindinput="page_fun_3"
+            />
+          </view>
+        </view>
+
+        <view class="_dflex">
+          <view style="flex: 4" class="_dflex _ai_center"
+            ><text>maskClass</text></view
+          >
+          <view style="flex: 6" class="_ui-input">
+            <input
+              value="{{page_data_4}}"
+              placeholder="maskClass"
+              type="text"
+              bindinput="page_fun_4"
+            />
+          </view>
+        </view>
+
+        <view class="_dflex">
+          <view style="flex: 4" class="_dflex _ai_center"
+            ><text>style</text></view
+          >
+          <view style="flex: 6" class="_ui-input">
+            <input
+              value="{{page_data_5}}"
+              placeholder="style"
+              type="text"
+              bindinput="page_fun_5"
+            />
+          </view>
+        </view>
+      </view>
+    </box>
+  </showbox>
+</view>