迅睿CMS的uniapp开发日记【2】先简单做个列表页
首先说说，我是菜鸟，原来都没接触过这鬼东西，写的不对的，大神多指导，有好的教教我。我只是把我的实现过程分享出来！！！有些也不完善，比我还菜的就等等我学会再改！
1、新建个页面
在pages目录右键点击新建页面，名称list，会自动生成相应的目录及文件，参考如下
2、新建后页面是长这样的，分块来看就是三个部分
第一个模板代码
第二个js代码
第三个样式
<template>
<view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
</style>3、页面的设计，我想要在底部有个导航栏，像这样的
uView里就有，文档地址是：https://www.uviewui.com/components/tabbar.html
参照官方文档，就直接在view代码内写入：
<u-tabbar :value="value6" @change="name => value6 = name" :fixed="true" :placeholder="true"
:safeAreaInsetBottom="true">
<u-tabbar-item text="首页" icon="home" @click="onClick_button('/pages/index/index')"></u-tabbar-item>
<u-tabbar-item text="分类" icon="photo" @click="onClick_button('/pages/list/list')"></u-tabbar-item>
<u-tabbar-item text="搜索" icon="play-right"></u-tabbar-item>
<u-tabbar-item text="我的" icon="account"></u-tabbar-item>
</u-tabbar>我放了四个，首页的分类的点击事件我加了，其它的后面边学边加，放个首页、分类、搜索、然后有开发会员中心的话，就放个‘我的’
样式什么的要改，参数官方文档
我这里就加了个click事件
@click="onClick_button('/pages/index/index')"这意思是当我点击时，触发js的 onClick_button函数，我把地址参数传过去
所以，要在js的method里写上onClick_button函数，其实就是个跳转的，如下
onClick_button(tourl) {
uni.navigateTo({
url: tourl,
success: res => {
console.log(tourl);
},
fail: () => {},
complete: () => {}
});
},到这里，底部的导航栏也就出来了
这里候运行到浏览器试试，是不是底部导航栏也就出来了
IDE调试内部浏览器，如果没装，点击了会自己安装，稍等一会
有个调试信息，相当于浏览器F12功能，
4、同样是页面设计，顶部我想要个列出所有1级栏目，最左边有个全部的，打开默认是所有最新的10条信息
我用的是uview的u-tabs：https://www.uviewui.com/components/tabs.html
像这样
直接按官方的来，在view下面直接加入：
<u-tabs :list="category" @click="categoryclick">
<view slot="right" style="padding-left: 4px;" @tap="$u.toast('插槽被点击')">
<u-icon name="list" size="21" bold></u-icon>
</view>
</u-tabs>
来说明代码：
list数据，我定义category，点击事件刚刚有讲到，我定义categoryclick，那个插槽被点击的，我是先留着，看有没有用，后面如果没用删了就好了，这里暂时没用到
先开始说category数据：
A:在js的data(),return里先定义，其它的后面讲到，圈的就是分类数组。
B:请求数据：在js的onload里，在加载时请求api，获取数值，这里我先不用request的类，直接使用uni-request，比较直观点
uni.request({
url: 'http://www.strconvert.com/index.php?s=httpapi&id=3&appid=1&appsecret=PHXXXXXXXX25',
method: 'GET',
data: {},
success: res => {
this.category = res.data.data;
this.category.unshift(this.all);
},
fail: () => {
this.status = 'no-more';
},
complete: () => {}
});这个url，是我新建的api数据的地址，其实直接用栏目的api也是可以
上面代码里 有一个
this.category.unshift(this.all);
这是因为，我取后的分类，并没有“全部”，这个项目，所以我要把“全部”这个添加进数组，定义在data() return里
//这个all定义就是加入分类数据数组前面
all: {
name: '全部',
id: 0
},后台API接口数据是这样的
{category module=share pid=0 order=hit}
{php $api[$key]['id']=$t['id'];}
{php $api[$key]['name']=$t['name'];}
{php $api[$key]['mid']=$t['mid'];}
{/category}成功的res数据，你们要看不明白，可以使用console.log()来打印调试看看
this.category = res.data.data;
像这样
到了这里，测试运行一下，就发现顶部分类导航也出来了
C:点击事件，记得刚才代码里有个点击事件吧，@click那，要在js的method里加个方法categoryclick，代码如下：
categoryclick(item) {
this.mid = item.mid;
this.catid = item.id;
this.page = 1;
this.getlist();
},这个点击之后，就是把点击对应的分类的模块、分类id、当前页面置1，然后再调用今年数据的getlist方法（这个方法，下一步讲到）
这几个要定义的，同样在data return里我已经有定义过了的
5、页面正文内容，正文内容图文混排
图文混排可以查看uni-ui的图文混排，我这里加个<view>放到顶部导航下面
代码如下：
<view class="post-list"> <uni-list v-for="item in newslist"> <!-- 水平排列，左图右文 --> <uni-list-item :title="item.title" clickable :id="item.id" @click="onClick(item.id)"> <template v-slot:header> <view class="uni-thumb"> <image :src="item.thumb" mode="aspectFill"></image> </view> </template> </uni-list-item> </uni-list> </view>
这里用到v-for，就是循环，不懂的可以看手册去。
newslist
是我们定义的内容数组，然后后面就循环里就用item.title啊什么的
又看到有个
@click事件，到方法onClick，传参信息id
先说newslist
同样请求api，这回我用request插件来
上面有张图，同样定义了data() return里有 newslist:[]
A：在onload里，调用getlist方法
this.getlist()
B:在method里定义方法getlist,代码如下：
getlist() {
console.log(this.mid);
this.$http.get('c=search&api_call_function=module_list', {
s: this.mid,
id: this.catid,
page: this.page,
}).
then((newslist) => {
this.newslist = newslist;
//this.count = newslist.total;
//这里只会在接口是成功状态返回
}).catch(function(error) {
//这里只会在接口是失败状态返回，不需要去处理错误提示
//console.log(error);
});
},this.$http.get
这个参照插件的使用方法，get后面紧跟的是url，因为在插件里已经定义了前面的appid和appcecret和根网址，所以这里只要有后面的参数即可
c=search&api_call_function=module_list
这是官方给出的参数
我们要增加的参数在这里
{
s: this.mid,
id: this.catid,
page: this.page,
}记得这个点击栏目里有说到过吧，s是模块，默认就是news，id是分类id，默认是1，page是当前面，在没有点击分页时，默认是1
所以当点击分类时，都按默认来，如果点击了栏目，再重新赋值
返回数组在这里赋值给newslist
then((newslist) => {
this.newslist = newslist;
//this.count = newslist.total;
//这里只会在接口是成功状态返回
})（那个count本来是我要取得分类的信息数，但写在获取栏目API那里，但发现，因为数组加了一个，信息空 了一个出来，后面又取消了）
去后台，API模块内容接口那设置一下，模块多的，每个都设置一下调用的数据，把那些要用的和可能要用到的勾上
到了这里，运行一下，应该信息都出来了：
6、最后一下，点击后，到跳到信息页去
刚刚列表模板里留了个@click，记得不，方法是onClick，传参是信息ID
在js的method里加这个方法
onClick(id) {
var url = './';
uni.navigateTo({
url: '/pages/show/show?id=' + id,
success: res => {
console.log(id);
},
fail: () => {},
complete: () => {}
});
},这也就是个页面中转的
url提前定义了pages/show/show，加上个id，这个下一节讲到，就是要新建信息页了
7、分页
刚刚说取总数没得到，其实自己建个api接口数据，再得到栏目id也是可以，我这里也不麻烦了，直接用个加载更多的
<uni-load-more :status="status" :content-text="contentText" @clickLoadMore="clickLoadMore" />
这个也没什么好说的了，后面我还是想用分页的，可能更好一些。点击后方法，无非就是把当前面值加1
clickLoadMore(e) {
this.page = this.page + 1;
this.getlist();
uni.showToast({
icon: 'none',
title: "当前状态：" + e.detail.status
})
}8、好了，贴上一整页的代码，分页上下页的，我还没去，先留着后面有空改
<template>
<view>
<u-tabs :list="category" @click="categoryclick">
<view slot="right" style="padding-left: 4px;" @tap="$u.toast('插槽被点击')">
<u-icon name="list" size="21" bold></u-icon>
</view>
</u-tabs>
<view class="post-list">
<uni-list v-for="item in newslist">
<!-- 水平排列，左图右文 -->
<uni-list-item :title="item.title" clickable :id="item.id" @click="onClick(item.id)">
<template v-slot:header>
<view class="uni-thumb">
<image :src="item.thumb" mode="aspectFill"></image>
</view>
</template>
</uni-list-item>
</uni-list>
</view>
<uni-load-more :status="status" :content-text="contentText" @clickLoadMore="clickLoadMore" />
<uni-pagination :total="this.count" title="标题文字" prev-text="前一页" next-text="后一页" @change="change" />
<u-tabbar :value="value6" @change="name => value6 = name" :fixed="true" :placeholder="true"
:safeAreaInsetBottom="true">
<u-tabbar-item text="首页" icon="home" @click="onClick_button('/pages/index/index')"></u-tabbar-item>
<u-tabbar-item text="分类" icon="photo" @click="onClick_button('/pages/list/list')"></u-tabbar-item>
<u-tabbar-item text="搜索" icon="play-right"></u-tabbar-item>
<u-tabbar-item text="我的" icon="account"></u-tabbar-item>
</u-tabbar>
</view>
</template>
<script>
import config from "@/utils/config";
var pagenum = config.getpagesize;
var apiurl = config.getapiurl;
var pageCount = config.getPageCount;
var webSiteName = config.getWebsiteName;
var domain = config.getDomain;
export default {
data() {
return {
value6: 0,//这里是底部导航的，我没删
pageSize: 10,//定义分页数据量
category: [],//定义分类列表数据，就是顶上列出的一级分类
newslist: [],//定义信息列表数据
page: 1,//当前分页，默认打开为第一页
mid: 'news',//当前模块，默认是新闻模块
catid: 1,//默认的栏目ID
count: 0,
//这个all定义就是加入分类数据数组前面
all: {
name: '全部',
id: 0
},
status: 'more',
statusTypes: [{
value: 'more',
text: '加载前',
checked: true
}, {
value: 'loading',
text: '加载中',
checked: false
}, {
value: 'noMore',
text: '没有更多',
checked: false
}],
contentText: {
contentdown: '查看更多',
contentrefresh: '加载中',
contentnomore: '没有更多'
},
}
},
onLoad: function() {
//取得新闻列表内容
this.getlist();
uni.request({
url: 'http://www.strconvert.com/index.php?s=httpapi&id=3&appid=1&appsecret=PHPCMF890AEE9CBA125',
method: 'GET',
data: {},
success: res => {
this.category = res.data.data;
this.category.unshift(this.all);
console.log(this.category);
},
fail: () => {
this.status = 'no-more';
},
complete: () => {}
});
},
methods: {
onClick(id) {
console.log(id);
var url = './';
uni.navigateTo({
url: '/pages/show/show?id=' + id,
success: res => {
console.log(id);
},
fail: () => {},
complete: () => {}
});
},
onClick_button(tourl) {
uni.navigateTo({
url: tourl,
success: res => {
console.log(tourl);
},
fail: () => {},
complete: () => {}
});
},
categoryclick(item) {
this.mid = item.mid;
this.catid = item.id;
this.page = 1;
this.getlist();
},
getlist() {
console.log(this.mid);
this.$http.get('c=search&api_call_function=module_list', {
s: this.mid,
id: this.catid,
page: this.page,
}).
then((newslist) => {
this.newslist = newslist;
this.count = newslist.total;
//这里只会在接口是成功状态返回
}).catch(function(error) {
//这里只会在接口是失败状态返回，不需要去处理错误提示
//console.log(error);
});
},
change(e) {
console.log(e);
this.page = e.current;
this.getlist();
},
onChange(e) {
this.status = e.detail.value
console.log(this.status);
},
clickLoadMore(e) {
this.page = this.page + 1;
this.getlist();
uni.showToast({
icon: 'none',
title: "当前状态：" + e.detail.status
})
}
}
}
</script>
<style>
</style>
