【微信小程序】从零开始搭建一个英语学习小程序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条四级数据）。测试数据如下：

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

{
    createtime: "2021-05-03",
    level: 0,
    lid: 12,
    liked: 0,
    listencount: 295,
    listenimageurl: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg1.doubanio.com%2Fview%2Fnote%2Fl%2Fpublic%2Fp60590108.jpg&refer=http%3A%2F%2Fimg1.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1631372659&t=3cf6f803b03a99f165e93333b89c9af6",
    listenurl: null,
    text: null,
    title: "Hello World！"
},

我们可以设置一个绑定事件bindtap="getlisteninfo"，使得点击四级文章时，可以获取到相应的数据。在js中完成绑定事件的取值，当点击如下所示区域时，我们希望取到上述放在listeninfo二维数组中的数据详细信息。

我们可以先在js中测试一下点击上述文章会传递哪些数据，测试过程如下：

  getlisteninfo: function(e) {
    console.log(e)
  },

此时点击上述文章，控制台会显示我们取到的数据，如下：

经过筛查，我们可以发现我们实际需要的值可以通过e.currentTarget.dataset.item来获取需要的值。于是，我们可以将js中绑定事件的逻辑改成如下所示的代码。

getlisteninfo: function(e) {
  console.log(e.currentTarget.dataset.item)
},

那么，此时我们在点击四级模块中某篇文章之后，我们会在控制台成功读取该文章的详细信息，如下图所示：

在wxml文件中，我们通过ColorUI提供的组件 <view class="cu-card case no-card {{index%2 == 0?'left':'right'}}" style=" background-image: url({{item.listenimageurl}});">，实现页面排版。index%2 == 0?'left':'right'表示index值为奇数时排在左边，index为偶数时，排在右边，实现了一行两个数据的排版。更全面的实现步骤如下：

  <view wx:for="{{listeninfo[TabCur]}}" wx:key="index" class="item" bindtap="getlisteninfo" data-item="{{item}}">
    <view class="cu-card case no-card {{index%2 == 0?'left':'right'}}" style="  background-image: url({{item.listenimageurl}});">
      <view class="cu-tag bg-blue">听力</view>
      <view class="text-white text-sm">
        <text class="cuIcon-attentionfill margin-lr-xs"></text>浏览:{{item.listencount}}
      </view>
      <view class="cu-bar bg-shadeBottom">
        <text class="text-cut">{{item.title}}</text>
      </view>
    </view>
  </view>

四、“阅读”页面设计

“阅读”界面的设计与“听力”界面基本上一致。界面结构如下所示：

在wxml中实现的逻辑与前面听力界面基本一致，具体如下：

<view class="reading-body">
  <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>
  <!-- 排列显示 -->
  <view wx:for="{{readinginfo[TabCur]}}" wx:key="index" class="item" bindtap="getreadinginfo" data-item="{{item}}">
    <view class="cu-card case no-card {{index%2 == 0?'left':'right'}}" style="  background-image: url({{item.listenimageurl}});">
      <view class="cu-tag bg-blue">听力</view>
      <view class="text-white text-sm">
        <text class="cuIcon-attentionfill margin-lr-xs"></text>浏览:{{item.listencount}}
      </view>
      <view class="cu-bar bg-shadeBottom">
        <text class="text-cut">{{item.title}}</text>
      </view>
    </view>
  </view>
</view>

相应地在js文件中，增加绑定事件和测试数据，data中的数据如下所示（只展示部分）：

 data: {
    TabCur: 0,
    readtablist: ['低阶', '中阶', '高阶'],
    readinginfo: [[{
      createtime: "2021-05-03",
      level: 0,
      lid: 12,
      liked: 0,
      listencount: 295,
      listenimageurl: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2F00.imgmini.eastday.com%2Fmobile%2F20180810%2F20180810103009_dc82c17ad7df79f7f08cfe37ba5578f7_4.jpeg&refer=http%3A%2F%2F00.imgmini.eastday.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622543110&t=8d02b57e9e2fdbf1eade907c7c5d97de",
      listenurl: null,
      text: null,
      title: "Want to Kill Yourself ?"
    }],[],[]]
  },

绑定事件取值方法与之前一致：

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

五、“单词”主页面设计★

1. 搜索框的实现

设计单词页面时，我们希望能够在页面头部实现一个查词功能。需要定义一个搜索框然后联系到数据库。（现阶段还未设计数据库，所以只写设计搜索框的代码）实现搜索框的代码如下所示：

  <!-- 搜索栏 -->
  <view class="searchs">
        <mp-searchbar bindselectresult="selectResult" search="{{search}}" placeholder="搜索单词" class="searchtab" bindfocus="hideothers" bindcancel="searchCancel"></mp-searchbar>
    </view >

效果如下：

2. 每日单词背诵进度的实现

3. 阅读轮播图的实现