--完善优化城市选择组件--

components/city-change/index.js

@@ -2,28 +2,155 @@
 const app = getApp()
 Component({
   properties: {
-    styles:{//这个是可以自定义最外层的view的样式
-      type:String,
-      value:'',
+    styles: { //这个是可以自定义最外层的view的样式
+      type: String,
+      value: '',
       observer: function (newval, oldval) {
         // 监听改变
         console.log(newval, oldval);
       }
     },
-    
+
   },
   data: {
     //下面是字母排序
-    
     letter: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"],
     cityListId: '',
     //下面是城市列表信息，这里只是模拟数据
-    citylist: [{ "letter": "A", "data": [{ "id": "v7", "cityName": "安徽" }] }, { "letter": "B", "data": [{ "id": "v10", "cityName": "巴中" }, { "id": "v4", "cityName": "包头" }, { "id": "v1", "cityName": "北京" }] }, { "letter": "C", "data": [{ "id": "v15", "cityName": "成都" }] }, { "letter": "D", "data": [{ "id": "v21", "cityName": "稻城" }] }, { "letter": "G", "data": [{ "id": "v17", "cityName": "广州" }, { "id": "v29", "cityName": "桂林" }] }, { "letter": "H", "data": [{ "id": "v9", "cityName": "海南" }, { "id": "v3", "cityName": "呼和浩特" }] }, { "letter": "L", "data": [{ "id": "v24", "cityName": "洛阳" }, { "id": "v20", "cityName": "拉萨" }, { "id": "v14", "cityName": "丽江" }] }, { "letter": "M", "data": [{ "id": "v13", "cityName": "眉山" }] }, { "letter": "N", "data": [{ "id": "v27", "cityName": "南京" }] }, { "letter": "S", "data": [{ "id": "v18", "cityName": "三亚" }, { "id": "v2", "cityName": "上海" }] }, { "letter": "T", "data": [{ "id": "v5", "cityName": "天津" }] }, { "letter": "W", "data": [{ "id": "v12", "cityName": "乌鲁木齐" }, { "id": "v25", "cityName": "武汉" }] }, { "letter": "X", "data": [{ "id": "v23", "cityName": "西安" }, { "id": "v28", "cityName": "香港" }, { "id": "v19", "cityName": "厦门" }] }, { "letter": "Z", "data": [{ "id": "v8", "cityName": "张家口" }] }],
+    citylist: [{
+      "letter": "A",
+      "data": [{
+        "id": "v7",
+        "cityName": "安徽"
+      }]
+    }, {
+      "letter": "B",
+      "data": [{
+        "id": "v10",
+        "cityName": "巴中"
+      }, {
+        "id": "v4",
+        "cityName": "包头"
+      }, {
+        "id": "v1",
+        "cityName": "北京"
+      }]
+    }, {
+      "letter": "C",
+      "data": [{
+        "id": "v15",
+        "cityName": "成都"
+      }]
+    }, {
+      "letter": "D",
+      "data": [{
+        "id": "v21",
+        "cityName": "稻城"
+      }]
+    }, {
+      "letter": "G",
+      "data": [{
+        "id": "v17",
+        "cityName": "广州"
+      }, {
+        "id": "v29",
+        "cityName": "桂林"
+      }]
+    }, {
+      "letter": "H",
+      "data": [{
+        "id": "v9",
+        "cityName": "海南"
+      }, {
+        "id": "v3",
+        "cityName": "呼和浩特"
+      }]
+    }, {
+      "letter": "L",
+      "data": [{
+        "id": "v24",
+        "cityName": "洛阳"
+      }, {
+        "id": "v20",
+        "cityName": "拉萨"
+      }, {
+        "id": "v14",
+        "cityName": "丽江"
+      }]
+    }, {
+      "letter": "M",
+      "data": [{
+        "id": "v13",
+        "cityName": "眉山"
+      }]
+    }, {
+      "letter": "N",
+      "data": [{
+        "id": "v27",
+        "cityName": "南京"
+      }]
+    }, {
+      "letter": "S",
+      "data": [{
+        "id": "v18",
+        "cityName": "三亚"
+      }, {
+        "id": "v2",
+        "cityName": "上海"
+      }]
+    }, {
+      "letter": "T",
+      "data": [{
+        "id": "v5",
+        "cityName": "天津"
+      }]
+    }, {
+      "letter": "W",
+      "data": [{
+        "id": "v12",
+        "cityName": "乌鲁木齐"
+      }, {
+        "id": "v25",
+        "cityName": "武汉"
+      }]
+    }, {
+      "letter": "X",
+      "data": [{
+        "id": "v23",
+        "cityName": "西安"
+      }, {
+        "id": "v28",
+        "cityName": "香港"
+      }, {
+        "id": "v19",
+        "cityName": "厦门"
+      }]
+    }, {
+      "letter": "Z",
+      "data": [{
+        "id": "v8",
+        "cityName": "张家口"
+      }]
+    }],
     //下面是热门城市数据，模拟数据
     newcity: ['北京', '上海', '广州', '深圳', '成都', '杭州'],
     // citySel: '全国',
     locateCity: '',
-    height: app.globalData.safeFragmentHeight,
+    touchEndy:0,
+    rightheight:0,
+    topHeight:0,
+    dialogIsShow:false
+  },
+  attached() {
+    var that=this
+    this.data.topHeight=app.globalData.CustomBar
+    var query = this.createSelectorQuery()
+    query.select('#rightSortHeight').boundingClientRect(function (res) {
+       console.log(res);
+       that.setData({
+        rightheight:res.height
+       })
+    }).exec();
   },
   methods: {
     //点击城市
@@ -31,7 +158,7 @@ Component({
       const val = e.currentTarget.dataset.val || '',
         types = e.currentTarget.dataset.types || '',
         Index = e.currentTarget.dataset.index || '',
-        that=this;
+        that = this;
       let city = this.data.citySel;
       switch (types) {
         case 'locate':
@@ -51,17 +178,19 @@ Component({
           city = val.cityName;
           break;
       }
-      if(city){
+      if (city) {
         wx.setStorage({
           key: 'city',
           data: city
-        })　　　　//点击后给父组件可以通过bindcitytap事件，获取到cityname的值，这是子组件给父组件传值和触发事件的方法
-        this.triggerEvent('citytap', { cityname: city });
-      }else{
+        }) //点击后给父组件可以通过bindcitytap事件，获取到cityname的值，这是子组件给父组件传值和触发事件的方法
+        this.triggerEvent('citytap', {
+          cityname: city
+        });
+      } else {
         console.log('还没有');
         this.getLocate();
       }
-     
+
     },
     //点击城市字母
     letterTap(e) {
@@ -69,7 +198,8 @@ Component({
       this.setData({
         cityListId: Item
       });
-      console.log(this.data.cityListId);
+      this.titleDialog(Item)
+    
     },
     //调用定位
     // getLocate(){
@@ -88,8 +218,44 @@ Component({
     //     wx.setStorageSync('locatecity', { city: val, time: new Date().getTime() });
     //   });
     // }
+    //开始触摸事件
+    touchStart: function (e) {
+      console.log('开始')
+
+    },
+    touchMove: function (e) {
+      this.data.touchEndy = e.touches[0].pageY-this.data.topHeight;
+      var lindex = parseInt(this.data.touchEndy / this.data.rightheight * 26);//根据前面分析获取手指触摸位置在letters中的index值
+      var value = this.data.letter[lindex];
+      console.log(value)
+      this.titleDialog(value)
+
+    },
+    touchEnd: function (e) {
+      console.log('结束')
+      var lindex = parseInt(this.data.touchEndy / this.data.rightheight * 26);//根据前面分析获取手指触摸位置在letters中的index值
+      var value = this.data.letter[lindex];
+      this.setData({
+        cityListId: value
+      });
+      console.log(value)
+      this.titleDialog(value)
+
+    },
+    titleDialog: function (value) {
+      this.setData({
+        dialongValue:value,
+        dialogIsShow:true
+      })
+      setTimeout(() => {
+        this.setData({
+          dialongValue:null,
+          dialogIsShow:false
+        })
+      }, 1500);
+    },
   },
-  ready(){
+  ready() {
     // console.log(getApp());
     // let that = this,
     //     cityOrTime = wx.getStorageSync('locatecity')||{},
@@ -102,5 +268,5 @@ Component({
     //     locateCity: cityOrTime.city
     //   })
     // }
-  }
+  },
 })

components/city-change/index.json

@@ -1,3 +1,6 @@
 {
-  "component": true
+  "component": true,
+  "usingComponents": {
+    "wux-dialog": "/components/dialog/index"
+  }
   }

components/city-change/index.wxml

@@ -1,26 +1,32 @@
 <view class='city_box' style='{{styles}}'>
-      <view class='city_left'>
-          <scroll-view scroll-y style='width:100%;height:85vh;' scroll-with-animation scroll-into-view="{{cityListId}}">
-              <!-- <view class='city_locate' data-types='locate' catchtap='cityTap'>
+    <view class='city_left'>
+        <scroll-view scroll-y style='width:100%;height:85vh;' scroll-with-animation scroll-into-view="{{cityListId}}">
+            <!-- <view class='city_locate' data-types='locate' catchtap='cityTap'>
                   <text class='city_locate_title'>自动定位</text>
                   <text class='city_locate_text' style='{{!locateCity&&"color:#33b9ff;"}}'>{{locateCity||'点击定位'}}</text>
               </view> -->
-              <view class='national' data-types='national' catchtap='cityTap'>全国</view>
-              <view class='new_city'>
-                  <view class='new_city_title'>热门城市</view>
-                  <view class='new_city_box'>
-                      <text class='new_city_text' wx:for='{{newcity}}' wx:key='this' data-types='new' catchtap='cityTap' data-val='{{item}}'>{{item}}</text>
-                  </view>
-              </view>
-              <view class='city_list_box'>
+            <view class='national' data-types='national' catchtap='cityTap'>全国</view>
+            <view class='new_city'>
+                <view class='new_city_title'>热门城市</view>
+                <view class='new_city_box'>
+                    <text class='new_city_text' wx:for='{{newcity}}' wx:key='this' data-types='new' catchtap='cityTap'
+                        data-val='{{item}}'>{{item}}</text>
+                </view>
+            </view>
+            <view class='city_list_box'>
                 <block wx:for='{{citylist}}' wx:key='this' wx:for-item='letterItem' wx:for-index='letterIndex'>
-                  <view class='city_first_letter' id='{{letterItem.letter}}'>{{letterItem.letter}}</view>
-                  <text class='city_name' wx:for='{{letterItem.data}}' wx:key='this' data-types='list' catchtap='cityTap' data-index='{{index}}' data-val='{{item}}'>{{item.cityName}}</text>
+                    <view class='city_first_letter' id='{{letterItem.letter}}'>{{letterItem.letter}}</view>
+                    <text class='city_name' wx:for='{{letterItem.data}}' wx:key='this' data-types='list'
+                        catchtap='cityTap' data-index='{{index}}' data-val='{{item}}'>{{item.cityName}}</text>
                 </block>
-              </view>
-          </scroll-view>
-      </view>
-      <view class='city_right'>
-          <text class='letter_item' wx:for='{{letter}}' wx:key='this' catchtap='letterTap' data-item='{{item}}'>{{item}}</text>
-      </view>
-  </view>
+            </view>
+        </scroll-view>
+    </view>
+    <view class='city_right' id="rightSortHeight">
+        <text class='letter_item' wx:for='{{letter}}' wx:key='this' catchtap='letterTap' data-item='{{item}}'
+            bindtouchstart='touchStart' bindtouchmove='touchMove' bindtouchend='touchEnd'>{{item}}</text>
+    </view>
+</view>
+<view class='cu-dialog show-dialog' wx:if="{{dialogIsShow}}">
+    <text>{{dialongValue}}</text>
+</view>

components/city-change/index.wxss

@@ -1,26 +1,30 @@
-.city_box{
-  height:100%;
+.city_box {
+  height: 100%;
   background: #fff;
   display: flex;
 }
-.city_left{
+
+.city_left {
   flex: 1;
 }
-.city_right{
+
+.city_right {
   width: 60rpx;
-  margin-top: 20rpx;
+  display: flex;
   flex-direction: column;
   justify-content: space-around;
 }
-.letter_item{
+
+.letter_item {
   flex: 1;
-  height: 40rpx;
   display: block;
   font-size: 24rpx;
   color: #33B9FF;
   text-align: center;
 }
-.city_locate,.national{
+
+.city_locate,
+.national {
   height: 80rpx;
   line-height: 80rpx;
   border-bottom: 1px solid #efefef;
@@ -28,33 +32,39 @@
   color: #333;
   padding-left: 25rpx;
 }
-.city_locate_title{
+
+.city_locate_title {
   color: #999;
   margin-right: 20rpx;
 }
-.new_city{
+
+.new_city {
   background: #efefef;
   font-size: 28rpx;
 }
-.new_city_title{
+
+.new_city_title {
   line-height: 50rpx;
   color: #999;
   padding-left: 25rpx;
   margin-bottom: 20rpx;
 }
-.new_city_box{
+
+.new_city_box {
   display: flex;
   flex-wrap: wrap;
 }
-.new_city_text{
+
+.new_city_text {
   width: 200rpx;
   text-align: center;
   line-height: 70rpx;
   background: #fff;
   border-radius: 35rpx;
-  margin:0 0 22rpx 22rpx;
+  margin: 0 0 22rpx 22rpx;
 }
-.city_first_letter{
+
+.city_first_letter {
   line-height: 40rpx;
   height: 40rpx;
   padding-left: 25rpx;
@@ -62,7 +72,8 @@
   background: #eee;
   color: #999;
 }
-.city_name{
+
+.city_name {
   display: block;
   line-height: 80rpx;
   height: 80rpx;
@@ -70,4 +81,22 @@
   font-size: 28rpx;
   color: #333;
   padding-left: 25rpx;
+}
+
+.show-dialog {
+  width: 10vh;
+  height: 10vh;
+  position: absolute;
+  top: 50vh;
+  left: 40vw;
+
+  background: white;
+  color: #1296DB;
+  font-size: 100rpx;
+  font-weight: bold;
+  position: fixed;
+  padding-top: 30rpx;
+  padding-bottom: 30rpx;
+  text-align: center;
+  box-shadow:0px 2px 5px 5px gray;
 }