微信小程序开发（三）地图
顶部导航栏
顶部导航栏分为四块，分别为全部、品种、地区和搜索，其中品种和地区在点击后需要进一步细分，品种里分三大类，每一类下有子类可供选择，地区里是一堆子类可供选择，搜索直接跳转到搜索页。导航栏代码如下：
<view class="tab-container">
<view class="tab">
<view wx:for="{{TabItems}}" wx:key="index" class="tab-item {{CurrentTab == item.id ? 'tab-item-active' : ''}}" data-current="{{item.id}}" bindtap="clickTab">{{item.title}}</view>
</view>
<view class="search-container" bindtap="onSearchTapped">
<icon type="search" size="{{30}}"></icon>
</view>
</view>
在这里我没有做成导航栏内部的嵌套式结构，而是选择了并列式结构，用导航栏的 id 控制下方区域的显示内容，所以此处仅为导航栏代码，导航栏实现过程和首页类似，不再赘述。这里在导航栏末尾我增加了一个搜索功能，直接跳转到搜索页面。
品种选项卡
品种选项卡内分为三个不同的交易所，即三个类，每一类下面是属于这一类的子类。代码如下：
<block wx:if="{{Categories.Visible}}">
<cover-view class="category-container">
<cover-view class="category-tab">
<cover-view wx:for="{{CategoryTabItems}}" wx:key="index" class="category-tab-item {{CurrentCategoryTab == item.id? 'category-tab-item-active' : ''}}" data-current="{{item.id}}" bindtap="clickCategoryTab">
<cover-view data-current="{{item.id}}" bindtap="clickCategoryTab">
{{item.title}}
</cover-view>
</cover-view>
</cover-view>
<cover-view class="line"></cover-view>
<cover-view class="category-tag">
<cover-view wx:for="{{Categories[CurrentCategoryTab]}}" wx:key="index" class="category-tag-item {{TappedCateItemId == index? 'category-tag-item-active' : ''}}" data-id="{{index}}" bindtap="clickCategoryItem">
<cover-view>
{{item}}
</cover-view>
</cover-view>
</cover-view>
</cover-view>
</block>
这一块分为两个部分，上半部分是一个类似于导航栏的选择器，与导航栏的唯一区别就是 view 和 cover-view，功能上完全一致；下半部分是 flex 布局的块状网格，每个块都是一个子类。值得注意的是，由于我在后面设置的 map 组件是自适应整个屏幕高度的，所以这里必须用 cover-view，否则 map 组件会覆盖到 view 或者其他组件上，无论如何设置 z-index 都无济于事。
地区选项卡
这一块其实就是品种选项卡的子类部分，附 wxml 代码：
<block wx:if="{{Districts.Visible}}">
<cover-view class="district-container">
<cover-view wx:for="{{Districts[0]}}" wx:key="index" class="district-item {{TappedDistItemId == index? 'district-item-active' : ''}}" data-id="{{index}}" bindtap="clickDistrictItem">
<cover-view>
{{item}}
</cover-view>
</cover-view>
</cover-view>
</block>
以上品种和地区选项卡都是分别用 block 标签来控制是否显示的，后台处理 js 代码：
// 单击选项卡切换
clickTab: function(e) {
let categoriesTarget = "Categories.Visible"
let districtTarget = "Districts.Visible"
if (e.target.dataset.current == 0) {
if (this.data.CurrentTab == 0) {
return false
} else {
this.setData({
CurrentTab: e.target.dataset.current,
[categoriesTarget]: false,
[districtTarget]: false,
CurrentCategoryTab: 0,
TappedCateItemId: -1,
TappedDistItemId: -1
})
}
} else if (e.target.dataset.current == 1) {
this.setData({
CurrentTab: e.target.dataset.current,
[categoriesTarget]: !this.data.Categories.Visible,
[districtTarget]: false,
TappedDistItemId: -1
})
} else {
this.setData({
CurrentTab: e.target.dataset.current,
[categoriesTarget]: false,
[districtTarget]: !this.data.Districts.Visible,
CurrentCategoryTab: 0,
TappedCateItemId: -1
})
}
},
具体逻辑就是根据用户选择的选项卡编号进行分类讨论，分别用两个变量控制品种和地区选项卡的开关。在单击某一品种或地区时，可以通过我在 wxml 中设置的 data-id 获取到用户选中的子类的类名，js 代码：
// 单击某一品种
clickCategoryItem: function(e) {
let categoriesTarget = "Categories.Visible"
this.setData({
TappedCateItemId: e.currentTarget.dataset.id,
[categoriesTarget]: false
})
// 交易所名称
console.log(this.data.CategoryTabItems[this.data.CurrentCategoryTab].title)
// 交割品种名称
console.log(this.data.Categories[this.data.CurrentCategoryTab][e.currentTarget.dataset.id])
},
// 单击某一地区
clickDistrictItem: function(e) {
let districtTarget = "Districts.Visible"
this.setData({
TappedDistItemId: e.currentTarget.dataset.id,
[districtTarget]: false
})
// 地区名称
console.log(this.data.Districts[0][e.currentTarget.dataset.id])
},
这里我只实现到输出种类名称，以示用户需求的种类已被选中。
地图
地图部分我只写到高度自适应，其他功能时间有限没有完成。
<map class="map" style="height: {{mapHeight + 'px'}}"></map>
使用 wxml 自带的 map 组件可以设置一个默认高度的地图，通过 js 代码对其进行自适应高度设置：
// 设置地图自适应高度
onReady: function() {
wx.createSelectorQuery().select('.map').boundingClientRect((res) => {
let map2top = res.top
wx.getSystemInfo({
success: (res) => {
this.setData({
mapHeight: res.windowHeight - map2top
})
},
})
}).exec()
}
