admin 管理员组文章数量: 887017
微信小程序分析与学习(城市切换Switchcity)
城市切换Switchcity
- WXML部分详解
- 页面中代码和页面视图块的对应关系(在调试器中查看)
- 右侧索引栏对应代码
- 点击触发短暂效果
- 城市名容器对应代码
- 编辑器中查看对应代码
初学者(本人)面对城市切换的调试学习过程
对于示例的学习，我们需要找到这个功能的互动效果在哪里写(一般是js里面)，模块的视觉效果(边边块块和字体等)在.wxss中定义，而这些边边块块以及文字的内容又是在wx,l中创建的。只要有内容，在wxml中肯定有对应的设置。因此可以说整个的效果是通过wxml将js的效果和wxss的效果联系的。我们的调试目标就是体会这些联系产生效果的过程，并最后以总结的方式学习各个组件、配置和函数是怎样被使用的。
首先，看代码文件的情况
WXML部分详解
我们的第一步是找到wxml中对各个边边块块的架构代码。
找到wxml(这一个示例中只有一个switchcity.wxml)
，然后转到调试器页面。
页面中代码和页面视图块的对应关系(在调试器中查看)
右侧索引栏对应代码
第一行代码对应视图面右侧的滑动栏
…
但这一行代码只是定义了这一视图模块的所属的类“”searchLetter” “touchClass”，而这两个类名将在被用以在wxss中设置视觉效果。
/*wxss
.searchLetter{
position: fixed;
right: 0;
width: 40px;
height: 100%;
text-align: center;
justify-content: center;
display: flex;
flex-direction: column;
color: #666;
z-index: 1
}
.touchClass{
background-color: rgba(0, 0, 0,0.5);
color: #fff;
}
如上图所示为.searchLetter与touchClass中的样式设置。(在wsxx中模块所用视觉布置说明部分详细解读)
(继续看wxml)
上面是调试器里的代码显示，而 第一行与第三行代码前面有小箭头，是可以展开的。展开看一看里面是什么内容！
点击触发短暂效果
另外还有块代码与这一部分是紧密相连的，就是点击了右侧栏中的字母之后的短暂字母提示和滑动到相应区域的效果。(这一部分的代码在调试器中要有了相应的互动操作之后才会显示)
如下图所示:
因为代码很快就消失，重复了好多次才顺利点到展开看里面的内容。
代码中的文本内容很简单，就是点击的字母，视觉效果的类是"showSlectedLetter"。
城市名容器对应代码
scroll-view的代码在调试器中显示的是下面这样
…
打开前面的小箭头后是一串的class为“selection”的view(view是一种容器，scroll-view也是一种容器)
打开子集下的第一个view，可以看到里面的内容对应了A拼音开头的城市
以上都是调试器中的wxml代码显示，而它们跟在编辑器中编辑的代码试有一定的区别的。在编辑器中写的WXML中循环和选择，在调试的时候会显示具体值带入后的情况。(wxml的循环通常都是对显示相同的视觉效果的代码整合后而出现的，比如这里的a-z的显示，以及scroll-view中城市名称的显示)
编辑器中查看对应代码
然后我们转到编辑器中看着几部分的代码。
首先来看右侧栏在wxml中的对应代码
searchLetter与touchClass的父级视觉容器(view)下，是一个有循环语句的容器。循环是遍历searchLetter中的内容，以循环的方式将item.name都展现出来。
通过在搜索栏搜索"searchLetter”找到循环器可能在循环的内容。
可以找到在switchcity.js中有一赋值语句var searchLetter = city.searchLetter;表明searchLetter用的是city.searchLetter的值。赋值语句起到传递值的作用，是找到不同代码块的内在连接的突破口之一。对city选中后右键，可以看它的一些定义和实现等等(但我一般是通过调试的时候看里面的值来看它怎么被定义和使用的，调试的时候能看到它里面的值，更直观明显)。不管是通过看实现的方法还是调试的方法(这两种方式后面在讲解js的部分的时候再说明)，都能看到searchLetter中的值是A-Z的字符列表。
子级的视觉容器中需要显示的item.name中的内容，而侧边栏中显示的内容第A-Z的字母。所以item.name中的内容一般来说应该也是A-Z的字母，其实在前面调试器中查看时候看到过，就是之间的值。但是，这个值是什么时候被给到item.name的呢？这个值是从searchLetter中传过来的么？这个问题是暂时解决不了，因为翻遍整个switchcity.wxml都找不到item.name赋值的地方，在搜索栏里也没找到item的定义的地方。很有可能item是一个默认用来表示什么内容的东西，但这个也是就算在开发者文档里找到了也很难理解的东西。先在开发者文档里找一下:
在开发者文档里找到列表渲染中有item作为变量默认名，打开后的描述如下图。看大概的意思应该是所item的内容就是循环中跟在for后面的那个变量的内容。至于为什么是item.name而不是就是item这里先不考虑了，可能跟变量类型有关，比如因为searchLeter是字符串列表。
第二块代码是关于点击了字母之后的互动效果，这一块会比较复杂，虽然代码看上去很简洁。
通过调试器中的显示，我们已经知道了showLetter 中会显示字母，并且是在通过鼠标点击字母的互动后得到的字母值。但问题是showLetter中的值又是怎么传进去的？另外还有变量showSlectedLetter是在wxss中定义视觉效果。isShowLetter变量在if 之后，是用来做判断依据的，但现在还不知道具体是什么。因此目前要先弄清楚两个问题:showLetter中的值是怎么传进去的？isShowLetter变量是什么?
首先在搜索栏中搜索isShowLetter,
如图所示，它是一个布尔值，有三个地方提到了它。如下：
在Page的data中设置isShowLetter的初始值为否，对应刚开始不显示视图模块的效果。
在searchStart的this.setData中重新设置isShowLetter的值。searchStart后面的function(e)表示这是点击触发的函数。对应的是点击右侧栏中字母后出现的效果。另外，this.setScrollTop和this.nowLetter应该是设置了scroll-view中的参数，不过这两句等下一部分再看。
在searchEnd中的that.setData中将isShowLetter的值重新设置为false，对应含有字母的视觉模块消失。
但要详细观察这些布尔赋值语句引起的变化需要到js中进行调试。这里先接着讲wxml的对应显示城市名的代码块，对应的js解读部分等下一文章再做详解。
根据之前学到的item的信息，知道item与cityList是同一个内容。但要知道cityList里面的内容，还是需要到js文件中找。for循环之前也有说明，这里多出来的内容是for-item，data-city，bindtap，还有之前漏说了的wx:key="{{}}"的作用。考虑到篇幅原因，在下一个文章中再讲了。下一个文章中通过变量将scroll-view部分的wxml和js连起来讲。
城市切换代码来源:/%E5%9F%8E%E5%B8%82%E5%88%87%E6%8D%A2
本文标签： 微信小程序分析与学习(城市切换Switchcity)
版权声明：本文标题：微信小程序分析与学习(城市切换Switchcity) 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1732354571h1534061.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论