开始做登录

components/select/index.js

@@ -0,0 +1,44 @@
+// components/select/index.js
+Component({
+
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    list: [],
+    visible: false
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    onInput(e) {
+      console.log('e', e)
+      this.setData({
+        visible: true,
+        list: [e.detail, e.detail, e.detail]
+      })
+    },
+    close() {
+      this.setData({
+        visible: false,
+        list: []
+      })
+    },
+    onChoose(e) {
+      console.log('e', e)
+      const { data = {} } = e.currentTarget.dataset;
+      this.setData({
+        visible
+      })
+    }
+  }
+})

components/select/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-field": "@vant/weapp/field/index"
+  }
+}

components/select/index.wxml

@@ -0,0 +1,19 @@
+<!--components/select/index.wxml-->
+<view class="content">
+  <van-field
+    value="{{ value }}"
+    placeholder="请输入用户名"
+    border="{{ false }}"
+    label="用户名"
+    custom-style="height:100rpx"
+    bind:change="onChange"
+    bind:input="onInput"
+  />
+  <view class="modal" wx:if="{{visible}}">
+    <view class="options" >
+      <view wx:for="{{list}}" class="option" bind:tap="onChoose" data-data="{{item}}">{{item}}</view>
+    </view>
+    <view class="other" bind:tap="close"></view>
+  </view>
+</view>
+

components/select/index.wxss

@@ -0,0 +1,34 @@
+/* components/select/index.wxss */
+.content {
+  position: relative;
+}
+
+.options {
+ 
+
+  background-color: #fff;
+  padding: 20rpx;
+  width: 100%;
+}
+
+.option {
+  padding: 8rpx;
+
+}
+
+.modal {
+  position: absolute;
+  top: 100rpx;
+  left: 0;
+  width: 100%;
+  height: calc(100vh - 100rpx);
+  z-index: 99;
+  background-color: transparent;
+  display: flex;
+  flex-direction: column;
+}
+
+.other {
+  flex: 1;
+}
+