【微信小程序】从零开始搭建一个英语学习小程序03——页面样式设计（2）

三、“听力”页面设计

1. 子页面tab栏的设计

在该页面的tab栏中，需要显示“四级”、“六级”、“综合训练”三个菜单栏，点击不同的菜单可以显示对应的内容，例如点击“四级”时，“四级”页面所展示的内容均为四级相关。在listening页面的wxml定义如下页面所示的容器。

在view容器中用wx:for="{ {readtablist}}实现显示“四级”、“六级”、“综合训练”三个菜单栏，数据存放在js文件中data区域：readtablist: ['四级', '六级', '综合训练']。我们希望实现点击不同的菜单栏会触发不同的显示，这其实很简单，使用一个绑定事件bindtap="tabSelect"即可。
在js中，用setData取出我们想要的值，当点击“四级”时，获取到0；当点击“六级”时，获取到1；当点击“综合”时，获取到2。如下所示：

tabSelect:function(e){
   
  this.setData({
   
    TabCur: e.currentTarget.dataset.id
  })

完整的tab实现代码如下：

  <view class="tab">
    <!-- <scroll-view scroll-x class="nav"> -->
    <view class="nav">
      <view class="flex text-center">
        <view class="cu-item flex-sub {
    {index==TabCur?'text-white cur':''}}" wx:for="{
    {readtablist}}" wx:key="index" bindtap="tabSelect" data-id="{
    {index}}">
          {
  {item}}
        </view>
      </view>
    <!-- </scroll-view> -->
    </view>
  </view>

2. 取不同分区的数据

在设计tab栏下方内容区域时，我们在最外层使用了一个for循环，不断地取listeninfo[TabCur]中的数据值。listeninfo[TabCur]=0代表此时取得是“四级”页面对应的数据；listeninfo[TabCur]=1代表此时取得是“六级”页面对应的内容。listeninfo[TabCur]=2代表此时取得是“综合训练”页面的内容。此处用一个绑定事件bindtap="getlisteninfo"来实现取出四级页面中一篇文章的信息。
我们先在js文件的data中存放一些仅供我们测试的数据（后期连数据库后可直接修改），将四级文章顺序存放在二维数组的第一个元素中listeninfo[[{},{},{}], [], []]（即{},{},{}处代表3条四级数据）。测试数据如下：

其中的一条四级数据格式如下（与后期设计的数据库字段一一对应）：

{