记录一下小程序城市索引栏开发经历

• 背景。小程序开发，需要通过城市关联获取数据。所以选择城市是必经之路。点击打开城市列表。需要实现的是可以
  1. 搜索。
  2. 可以通过右侧字母索引查看。
• 这其中比较繁琐的就是在搜索的时候遮罩的显示和隐藏。以及查询出结果是，如果结果为空或者有值该怎样显示的情况。
  
• 下面是具体代码
  1. 需要注意的是。在遮罩层的显示和隐藏方面需要用到z-index来处理图层。
  2. 如输入框要在遮罩层上方。遮罩层要是半透明。以及未查询到结果也需要正常显示。其中他们有时需要同时显示。有时却需要互斥，不能同时显示。

<template><view class="container"><view class="search-box" style="position: relative; z-index: 10001"><uni-easyinputtype="text"placeholder="请输入城市名称"v-model="searchKeyword"@input="filterCities"@focus="onSearch = true"@blur="handleBlur"style="position: relative" /></view><view v-if="maskShow" class="overlay" @click="onSearch = false"></view><u-index-list v-if="indexSearchShow" :scrollTop="scrollTop" :index-list="['A', 'B']"><view v-for="(item, index) in indexList" :key="index" @click="handleClick(item)"><u-index-anchor :index="item.index" /><view class="list-cell">{{ item.cityName }} </view></view></u-index-list><uni-list v-if="searchResShow" class="panelCustom"><uni-list-itemv-for="(item, index) in searchDataList":key="index":title="item.cityName":clickable="true"@click="handleSearchClick(item)" /></uni-list><view v-if="noSearchResShow" style="text-align: center; margin-top: 20rpx; display: block"><text>未查询到结果</text></view></view>
</template>
<script>
export default {data() {return {scrollTop: 0,indexList: [{ index: 'A', cityCode: '110000', cityName: '北京市' },{ index: 'B', cityCode: '310000', cityName: '上海市' }],// 输入框：是否正在查询onSearch: false,// 输入框：搜索查询结果searchDataList: [],// 输入框：搜索的关键字searchKeyword: ''};},computed: {// 索引：是否展示搜索结果面板indexSearchShow() {return this.maskShow || !this.onSearch;},// 定义遮罩显示变量maskShow() {return this.onSearch && !this.noSearchResShow && !this.searchResShow;},// 未查询结果面板：未查询到结果noSearchResShow() {return this.onSearch && !this.searchResShow && this.searchKeyword !== '';},// 输入框：是否展示搜索结果面板searchResShow() {return this.onSearch && this.searchDataList.length > 0;}},onPageScroll(e) {this.scrollTop = e.scrollTop;},methods: {/** 索引：选择结果 */handleClick(e) {uni.navigateBack({ url: './detail?cityCode=' + e.cityCode + '&cityName=' + e.cityName });uni.$emit('update', { cityCode: e.cityCode, cityName: e.cityName });},// 输入框：搜索filterCities(val) {if (val === '') {this.searchDataList = [];return;}this.$u.post('/api/miniWechat/resource/hospital/findHospitalRegion', { cityName: val }).then((res) => {console.log('filterCities.post:', res);if (res.code === 200) {this.searchDataList = res.data ? res.data : [];} else {this.searchDataList = [];}});console.log('filterCities:', val);},/** 输入框：点击选择结果 */handleSearchClick(e) {console.log('handleSearchClick:', e);this.handleClick(e);},/** 输入框：失去焦点 */handleBlur() {if (this.searchKeyword === '') {this.onSearch = false;}}}
};
</script>
<style scoped>
.list-cell {display: flex;box-sizing: border-box;width: 100%;padding: 10px 24rpx;overflow: hidden;color: #323233;font-size: 14px;line-height: 24px;background-color: #fff;
}
.container {padding: 20rpx;
}
/* 半透明遮罩层 */
.overlay {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0, 0, 0, 0.1);z-index: 9998;
}
.overlay_list {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: write;z-index: 9998;
}
.search-input {height: 80rpx;padding: 0 24rpx;font-size: 28rpx;background-color: #fff;z-index: 10001;
}
.panelCustom {z-index: 10000;
}
</style>

• 总结。
  1. 参照现有样板制作，虽然不能百分百相同。但能学到他们的设计思路。以及在开发时处理问题时并进行学习。
  2. 这次对computed有四个计算属性的应用。逐渐发现computed和watch之间在使用上亲身理解之间的差别。我也许说的不对，但说一下。从应用情况角度来说，computed时将计算结果用于变量，比如说我定义了计算属性A，当B和C有变化时会作用于A, 此时A就自动计算，不用认为参与。那么watch就是要监听某个属性。自我感觉没有computed灵活。但watch是实时的，能做的业务逻辑就比computed要多了，因为computed是会缓存数据的。
  3. 页面之间的数据传递这里面用到了事件的通知。uni.nagitiveTo可以通过url传参。但是uni.nagitiveBack却不行。需要使用this.$on和this.$emit进行事件的注册和通知。但是在者之间会发现this在要回退的页面中已经无法获取了。所以需要通过另外的方式来处理。通过getCurrentPages().pop()获取到页面，并使用此变量进行数据的赋值。这部分会单独记录。