1. 首页布局
2. 顶部导航栏
导航栏布局：
scroll-view 内置标签，配置 scroll-x="true" 左右方向滑动，再删除滑动条
-
<!-- 顶部导航条 -->
-
<scroll-view scroll-x="true" class="navScroll">
-
<view class="item" :class="index==navIndex?'active':''" @click="clickNav(index,)"v-for="(item,index) in navArr" :key="">
-
{{}}
-
</view>
-
</scroll-view>
-
// 隐藏滚动条
-
::-webkit-scrollbar {
-
display: none;
-
width: 0 !important;
-
height: 0 !important;
-
-webkit-appearance: none;
-
background: transparent;
-
}
导航栏点击高亮切换：
v-for 中添加动态 class 判断，根据点击事件传入的 index 值，为选项卡添加上 active 样式实现高亮
-
<view class="item" :class="index==navIndex?'active':''" @click="clickNav(index,)"
-
v-for="(item,index) in navArr" :key=""></view>
-
clickNav(index, id) {
-
// 高亮切换
-
= index
-
},
导航栏点击切换分类数据：
设置一个分页 page，后续获取内容分页数据的时候使用，在切换选项卡的时候清空，重新请求新数据的第一页的初始数据
再调用函数获取数据
-
clickNav(index, id) {
-
// 高亮切换
-
= index
-
// 切换分类重置页码
-
= 1
-
// 切换分类重置之前分类的数据
-
= []
-
(id)
-
},
3. 内容模块
获取页面数据：
获取数据，渲染页面，触底后 page + 1 重新再次获取数据
[...oldList，...newList] 展开之前的数据，叠加进去新数据
-
// 获取新闻列表数据
-
getNewsData(id = 50) {
-
({
-
url: 'https://ku./dataApi/news/',
-
success: res => {
-
// 清除初始加载loading
-
();
-
// 数据加载到底
-
if (res.data.length == 0) {
-
= 1
-
({
-
title: '数据加载到底了~~~',
-
duration: 1000,
-
icon: "error"
-
});
-
}
-
// 数据正常触底叠加加载
-
= [..., ...res.data]
-
},
-
data: {
-
//传给服务器，告诉它需要返回数据分类
-
cid: id,
-
page:
-
}
-
})
-
}
-
},
分页数据获取：
触底后 page +1 再次调用获取数据函数，叠加上第二页的数据，且添加上加载动画
-
// 底部触底
-
onReachBottom() {
-
if ( == 0) {
-
({
-
title: '数据加载中'
-
});
-
} else {
-
({
-
title: '数据加载到底了~~~',
-
duration: 1000,
-
icon: "error"
-
});
-
return
-
}
-
new Promise(resolve => {
-
setTimeout(() => {
-
++
-
a()
-
resolve()
-
}, 1000)
-
}).then(() => {
-
()
-
})
-
},
点击模块跳转详情页面：
内容部分使用组件化， 新建的 components文件夹下创建，它会自动进行导入，可直接使用自定义组件名，组件内固定好格式，通过父组件传入数据进行渲染。
（在自定义函数上绑定点击事件，需要加上 .native 确定原生事件，不然会以为是自定义函数）
<newsbox @click.native="goDetail(item)" :item="item"></newsbox>跳转详情页面，携带对应点击的内容的参数
-
// 点击跳转详情页面
-
goDetail(item) {
-
({
-
url: `/pages/detail/detail?cid=${}&id=${}`
-
})
-
},
4. 详情页面
传参渲染页面：
获取传来的参数，在onLoad 小程序生命周期函数中可以获取到 Options 参数
-
onLoad(Options) {
-
uni.showLoading({
-
title: '加载中'
-
});
-
this.options = Options
-
this.getDetail()
-
},
根据传来的参数 id 等数据，去获取对应数据，更改标题，并且对其数据进行本地存储，用于后续的浏览历史的记录
-
getDetail() {
-
({
-
url: "https://ku./dataApi/news/",
-
data: this.options,
-
success: res => {
-
// 加载成功取消loading
-
();
-
this.detailList = res.data
-
// 更改封面首页的标题为新闻标题
-
({
-
title: this.
-
})
-
// 存储历史记录
-
this.saveHistory()
-
}
-
})
-
},
本地存储历史记录
('')
('')
-
// 存储历史记录
-
saveHistory() {
-
// 读取已有的历史记录，读不到的话就设置空数组
-
let historyArr = ('historyArr') || []
-
let item = {
-
id: ,
-
title: ,
-
classid: ,
-
picurl: ,
-
looktime: timestampToTime(Date.now() / 1000)
-
}
-
// 判断是否已经记录过了，找到其数据库数组中符合条件的那一个的索引号
-
let index = (i => {
-
return ==
-
})
-
if (index >= 0) {
-
// 缓存中存在，删除掉以前存的，再加入一个最新的到前面
-
(index, 1)
-
}
-
// 向前追加进新的历史记录
-
historyArr = [item, ...historyArr]
-
// 只运行存储最近的3个历史记录
-
historyArr = (0, 3)
-
// 将最新叠加后的数据重新存入本地
-
('historyArr', historyArr)
-
}
-
},
5. 个人中心
调用 ('') 获取之前本地存储的详情页面数据，进行页面渲染
清空历史记录：
('');
-
// 清除历史记录
-
cleanHistory() {
-
uni.removeStorageSync('historyArr');
-
this.getData()
-
},
6. 项目打包 APP
发行 - 原生App-云打包：
使用云端证书打包：
获取App安装包：
unpackage - release - apk - XXX 获取 App 安装包
