WEIXIN day_08(8.25) 学子影院项目实践4

实现点击首页左上角，选择城市业务

点击首页左上角城市名，跳转到城市列表页面，在城市列表页面中选择城市，选择完毕后，回到首页，更新首页左上角城市名称。

实现思路：

1. 新建一个城市列表页。pages/citylist/citylist。完成基础结构与样式。

2. 在列表页中显示所有的城市。

3. 在列表页实现左侧边栏导航，点击导航字母，自动滚动到相应位置。

   可以借助于scrollView的scroll-into-view属性动态修改滚动位置：

   <scroll-view scroll-into-view="A">
   	<view id="A">....view>
       <view id="B">....view>
       <view id="C">....view>
       <view id="D">....view>
       <view id="E">....view>
   scroll-view>
   1
   2
   3
   4
   5
   6
   7

4. 点击城市名称，选择某一个城市，将城市名称存入App.globalData。返回首页。

5. 在首页中重写onShow()方法，读取App.globalData中的数据，更新左上角即可。

在城市列表页中处理当前城市业务

1. 从index.js中复制一个getLocCity方法到citylist页面。
2. 在onLoad中调用该方法，将城市名称存入data.cityname。
3. 在页面中使用{{cityname}}显示城市名。
4. 点击当前城市text。将城市名存入globalData。返回首页。首页自动在onShow中将数据显示在左上角。

处理未授权情况下的城市重选业务

实现影院页面基本结构搭建

event.target与event.currentTarget的区别

event.target: 触发该事件的最底层的元素。

event.currentTarget：绑定该事件的元素。

<view class="v1" bindtap="tapv1">
    <view class="v2">view>
view>
tapv1(event){
	event.target
	event.currentTarget
}
1
2
3
4
5
6
7

问题：如果点击了v2，触发了tap事件，执行tapv1（冒泡现象）：

event.target: 指的是v2. 因为点击事件的最底层元素就是v2.

event.currentTarget: 指的是v1， 因为该事件绑定在v1元素上。

问题：如果点击了v1，触发了tap事件，执行tapv1：

event.target: v1. 因为点击事件的最底层元素就是v1.

event.currentTarget: v1， 因为该事件绑定在v1元素上。