三、“听力”页面设计
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 >
效果如下: