自己想做一个日语学习的微信小程序,过程中抓取别人数据接口的时候403 forbidden,由于网络安全的原因,最终也没有拿到详情页面数据,项目做了一半。
实现效果:
1、根据不同的分类,点击进入列表页时动态显示导航栏标题。
2、除了入门单元外,每个列表页又分为课文和单词两个tab切换模块(需要传递参数)
3、抓取的数据是html标签格式的数据,要进行数据解析
4、根据不同的分类,点击进入列表页时显示不同的数据(对获取的数据进行分类显示)。
数据格式:
知识点:
1、使用css3 transform将 ∟(直角符号)转为向右的箭头符号
2、在从首页进入列表页的时候,要携带参数
url="../list/list?type={{item.type}}&name={{item.name}}"
在列表页中的onLoad方法中接收参数,然后设置
that.setData({title:options.name});
// 动态修改导航栏标题
wx.etNavigationBarTitle({
title:that.data.title
});
3、tab切换
<view class='tab'>
<view class="tab-item
{{currentTopItem===index?'active':''}}"
wx:for="{{topTabItems}}" wx:key="index"
data-index="{{index}}"
bindtap='switchTab'>
{{item}}
</view>
</view>
使用flex布局完成tab样式,选中时通过添加类名动态改变样式
给tab-item绑定switchTab事件,并传递参数index(data-index=”{{index}}”)
获取参数时通过
e.currentTarget.dataset.index(这里需要跟data-xxx中的xxx保持一致即可,自己可以随意命名)
switchTab:function(e){
this.setData({
currentTopItem: e.currentTarget.dataset.index
});
}
4、解析html
使用了第三方插件:wxParse-微信小程序富文本解析自定义组件
github地址:https://github.com/icindy/wxParse
按照里面的基本使用效果,就能正确渲染出页面
5、对获取的数据进行分类显示
因为要对获取的数据进行分类显示,我在使用wxParse时并没有完全按照里面的写法使用里面的模版进行渲染数据,而是在本地修改了里面的方法,wxParse.js文件中的wxParse方法直接返回数据return transData;
对数组中的20条数据
如果title===’入门单元’,截取前三条返回
然后对剩余数据根据下标索引奇偶进行分类返回
tab为课文时返回偶数部分,为单词时返回奇数部分
if (that.data.title === '入门单元') {
// 数组截取
var result = transData.nodes.slice(0, 3);
} else {
// 数组截取
var all = transData.nodes.slice(3);
if (this.data.currentTopItem === 0) {
var result = this.even(all);
} else {
var result = this.odd(all);
}
}
that.setData({ books: result, loading: false });
获取数组中的偶数项使用的是arr.filter方法
// 偶数
even:function(arr){
return arr.filter((val, index) => {
if (index % 2 === 0) {
return true;
}
});
},