# 咨询页面
>## 包含：
> 1.下拉刷新功能
2.上拉加载
* * * * *
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<title>资讯</title>
<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
<style>
.con {
color: #666666;
margin: 10px 10px 0 0;
}
.favor:before {
color: #ccc;
}
.share:before {
color: #ccc;
}
span {
font-size: 13px;
}
h3 {
font-size: 18px;
}
.aui-list-view-cell:active{
background-color:#f5f5f5;
-webkit-transition: background-color 0.2s linear;
transition: background-color 0.2s linear;
}
</style>
</head>
<body>
<div class="aui-content">
<ul class="aui-list-view aui-list-view-con" id="megList">
<!--
<li class="aui-list-view-cell aui-img" tapmode onclick="fnOpenArticle()">
<img class="aui-img-object aui-pull-right" src="../../image/demo1.png">
<div class="aui-img-body">
<h3>图文列表一</h3>
<div class='con'>
<span class="aui-pull-left">2016.08.06</span>
<span class="aui-pull-right "> 20浏览</span>
<span class="aui-pull-right ">30 点赞 </span>
</div>
</div>
</li>
<li class="aui-list-view-cell" tapmode onclick="fnOpenArticle()">
<div class="aui-img-body">
<h3>图文列表三</h3>
<p class='aui-ellipsis-2'>图文列表缩略图在左边的样式，默认大小为80PX，文字介绍内容可以为一行也可以为两行，超出部分自动省略大</p>
<div class='con'>
<span class="aui-pull-left">2016.08.06</span>
<span class="aui-pull-right "> 20浏览</span>
<span class="aui-pull-right ">30 点赞 </span>
</div>
</div>
</li> -->
</ul>
</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/doT.min.js"></script>
<!-- 文章列表 -->
<script type="text/x-dot-template" id="MgT">
{{ for (var i = 0; i < it.length; i++){ }}
<li class="aui-list-view-cell aui-img" tapmode onclick="fnOpenArticle({{=it[i].tid}},{{=it[i].object_id}})">
<img class="aui-img-object aui-pull-right" src="{{=it[i].smete}}">
<div class="aui-img-body">
<h3>{{=it[i].post_title}}</h3>
<div class='con'>
<span class="aui-pull-left">{{=it[i].post_modified}}</span>
<span class="aui-pull-right "> {{=it[i].post_like}}浏览</span>
<span class="aui-pull-right ">{{=it[i].post_like}} 点赞 </span>
</div>
</div>
</li>
{{ }; }}
</script>
<script type="text/javascript">
//插入文章列表
function fnMlist_con(data_)
{
var apendText = $api.byId('MgT').text;
var fnapendText = doT.template(apendText);
var html = fnapendText(data_);
var list = $api.dom('#megList');
$api.append(list, html);
}
//获取资讯列表信息
var limit = 5; //文章数据每页显示数目
var skip = 0; //文章数据起始值
function fnMlist(reload_)
{
if (reload_)
{
skip = 0;
}
api.ajax({
url: 'http://www.sytest.com.cn/index.php?g=Osapp&m=Message&a=M_list',
method: 'get',
cache: true,
timeout: 30,
dataType: 'json',
data: {
values: {
limit : limit,
skip : skip
}
}
}, function(ret, err) {
if (ret) {
skip += limit;
if (reload_) {
$api.dom('#megList').innerHTML = '';
}
fnMlist_con(ret); //获取资讯列表信息
}
});
//加载完后关闭模态框
api.hideProgress();
//加载完毕后停止下拉刷新
api.refreshHeaderLoadDone();
}
apiready=function()
{
api.parseTapmode();
fnMlist(true);
//下拉刷新
api.setRefreshHeaderInfo({
visible: true,
bgColor: '#F0F0F0',
textDown: '下拉刷新...',
textUp: '松开刷新...',
showTime: true
}, function(ret, err) {
api.showProgress({
animationType: 'zoom',
title: '努力加载中...',
text: '先喝杯茶...',
modal: true
});
fnMlist(true);
});
//上拉显示更多数据
api.addEventListener({
name: 'scrolltobottom',
}, function(ret, err) {
fnMlist(false);
});
}
//列表点击
//tid 文章分类tid | pid 文章object.id
function fnOpenArticle(tid,pid)
{
api.openWin({
name: 'article_win',
url: './article_win.html',
pageParam : {tid:tid,pid:pid},
slidBackEnabled: 'false'
});
}
</script>
</html>
~~~
> 效果如下
* * * * *
### 点击详情页代码
> win页面代码
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<link rel="stylesheet" type="text/css" href="../../css/aui-win.css" />
<style type="text/css">
</style>
</head>
<body>
<header class="aui-bar aui-bar-nav aui-bar-info" id="aui-header">
<a class="aui-btn aui-btn-info aui-pull-left" tapmode onclick="closeWin()">
<span class="aui-iconfont aui-icon-left"></span>
</a>
<div class="aui-title">文章详情</div>
<a class="aui-iconfont aui-icon-menu aui-pull-right"></a>
</header>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript">
apiready = function(){
var tid = api.pageParam.tid;
var pid = api.pageParam.pid;
api.parseTapmode();
var header = $api.byId('aui-header');
$api.fixStatusBar(header);
var headerPos = $api.offset(header);
var body_h = $api.offset($api.dom('body')).h;
api.openFrame({
name: 'article_frm',
url: 'article_frm.html',
bounces: false,
pageParam : {tid:tid,pid:pid},
slidBackEnabled: 'false',
rect: {
x: 0,
y: headerPos.h,
w: 'auto',
h: 'auto'
}
})
};
function closeWin(){
api.closeWin();
}
</script>
</html>
~~~
> frame页面代码
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>文章详情</title>
<link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
<style>
.banner {
padding: 10px;
background: #fff;
}
.banner img {
width: 100%;
display: block;
height: 200px;
}
.des {
margin-top: 10px;
margin-bottom: 10px
}
.banner h2 {
padding: 1% 0 !important;
color: #333 !important;
font-size: 18px !important;
font-weight: 700 !important;
}
.banner p {
margin-bottom: 3%;
margin-top: 3%;
}
.aui-content{
padding-bottom: 20px;
}
/*评论区域*/
.aui-content2 {
padding: 10px;
background: #ffffff;
margin-bottom: 0;
}
img.aui-img-object {
border-radius: 50%;
}
.laud {
font-size: 14px;
color: #999;
}
p {
margin: 5px 0 !important;
display: table;
}
.helper-tag {
color: #666666;
font-size: 12px;
}
.aui-list-view i.aui-iconfont {
color: #666666;
}
.aui-badge {
background-color: transparent;
color: #666;
font-size: 14px;
}
/*底部样式设置*/
.aui-nav {
height: 40px;
/*background:#000;*/
}
.f-text {
}
</style>
</head>
<body>
<div class="main-content">
</div>
<!--评论区域-->
<div class='aui-content2'>
热门评论
</div>
<div class="aui-content">
<ul class="aui-list-view">
<!-- 评论内容 -->
<li class="aui-list-view-cell">
<a class="aui-arrow-right"> <span class="aui-badge">查看更多评论</span> </a>
</li>
</ul>
</div>
<!--底部区域-->
<footer class="aui-nav" id="aui-footer">
<ul class="aui-bar-tab">
<li class="active-warning" tapmode onclick="">
<span class="aui-iconfont aui-icon-share"></span>
<span class='f-text'>分享</span>
</li>
<li id="tabbar2" tapmode onclick="collect()">
<span class="aui-iconfont aui-icon-favor"></span>
<span class='f-text'>收藏</span>
</li>
<li id="tabbar3" tapmode onclick="openComment_list()">
<span class="aui-iconfont aui-icon-comment"></span>
<span class='f-text'>评论</span>
</li>
</ul>
</footer>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/doT.min.js"></script>
<!-- 文章内容 start-->
<script type="text/x-dot-template" id="postsT">
<div class="aui-content banner aui-tab">
<h1 class='aui-text-center aui-padded-10'>{{=it.post_title}}</h1>
<img src="{{=it.smeta}}" />
<p class="des">
{{=it.post_excerpt}}
</p>
<div class='aui-line-x'></div>
{{=it.post_content}}
<div class="aui-btn aui-btn-default aui-btn-outlined aui-pull-right" tapmode onclick="do_like()">
<span class="aui-iconfont aui-icon-appreciate aui-text-primary"></span>
有帮助<i class='like_count'> {{=it.post_like}}</i>
</div>
</div>
</script>
<!-- 文章内容 end-->
<!-- 有评论时 评论内容 start-->
<script type="text/x-dot-template" id="commentT">
{{ for (var t = 0; t < it.length; t++){ }}
<li class="aui-list-view-cell aui-img" tapmode onclick="">
<img class="aui-img-object aui-pull-left" src="{{=it[t].avatar}}">
<div class="aui-img-body">
{{=it[t].full_name}}
<div class="aui-pull-right laud">
<!-- <i class="aui-iconfont aui-icon-appreciate"></i>33 <i class="aui-iconfont aui-icon-comment"></i> -->
</div>
<p class='aui-ellipsis-3'>
{{=it[t].content}}
</p>
<p>
{{=it[t].createtime}}
</p>
</div>
</li>
{{ }; }}
</script>
<!-- 无评论时 -->
<script type="text/x-dot-template" id="wcommentT">
<li class="aui-list-view-cell">
<a class="aui-arrow-right"> <span class="aui-badge">暂无评论</span> </a>
</li>
</script>
<!-- 评论内容 end -->
<script type="text/javascript">
apiready = function()
{
api.parseTapmode();
var tid = api.pageParam.tid;
var pid = api.pageParam.pid;
fnLoadPosts(tid);
fnLoadComment(pid);
}
//文章内容
function fnLoadPosts(tid)
{
api.ajax({
url: 'http://www.sytest.com.cn/index.php?g=Osapp&m=Message&a=M_con',
method: 'get',
cache: true,
timeout: 30,
dataType: 'json',
data: {
values: {
tid: tid
}
}
}, function(ret, err) {
if (ret) {
fuUpdataPosts(ret);
}
});
}
//加入文章内容
function fuUpdataPosts(data_){
var postsTText = $api.byId('postsT').text;
var fnposts = doT.template(postsTText);
var html = fnposts(data_);
$api.dom('.main-content').innerHTML = html;
}
//获取评论内容
function fnLoadComment(pid){
api.ajax({
url: 'http://www.sytest.com.cn/index.php?g=Osapp&m=Home&a=Health_comment',
method: 'get',
cache: true,
timeout: 30,
dataType: 'json',
data: {
values: {
pid: pid
}
}
},function(ret, err){
if (ret) {
fnUpdataComment(ret);
}else{
fnUpdataComment();
}
});
}
//加入评论内容
function fnUpdataComment(data_)
{
if (!data_) {
var wcommentTText = $api.byId('wcommentT').text;
var wfncomment = doT.template(wcommentTText);
var html = wfncomment(data_);
$api.dom('.aui-list-view').innerHTML = html;
}else{
var commentTText = $api.byId('commentT').text;
var fncomment = doT.template(commentTText);
var html = fncomment(data_);
ul = $api.dom('.aui-list-view');
$api.before(ul,html);
}
}
//文章有帮助点赞
function do_like()
{
var pid = api.pageParam.pid;
var uid = $api.getStorage('user').id;
if (uid) {
api.ajax({
url : 'http://www.sytest.com.cn/index.php?g=Osapp&m=Health&a=do_like',
method : 'get',
cache : true,
timeout : 30,
dataType : 'json',
data : {
values : {
pid : pid,
uid : uid,
}
}
}, function(ret, err) {
if (ret.msg == 1) {
api.toast({
msg : '点赞+1'
});
count = $api.dom('.like_count');
var value = parseInt($api.text(count)) + 1;
$api.text(count, value);
} else if (ret.msg == 0) {
api.toast({
msg : '已赞'
});
} else {
api.toast({
msg : '点赞失败'
});
}
});
} else {
api.toast({
msg : '请先登陆'
});
}
}
//文章收藏
function collect()
{
var pid = api.pageParam.pid;
var uid = $api.getStorage('user').id;
if (uid) {
api.ajax({
url : 'http://www.sytest.com.cn/index.php?g=Osapp&m=Health&a=collect',
method : 'get',
cache : true,
timeout : 30,
dataType : 'json',
data : {
values : {
pid : pid,
uid : uid,
}
}
}, function(ret, err) {
if (ret.msg == 1) {
api.toast({
msg : '收藏成功'
});
} else if (ret.msg == 0) {
api.toast({
msg : '您已经收藏过了'
});
} else {
api.toast({
msg : '收藏失败'
});
}
});
} else {
api.toast({
msg : '请先登陆'
});
}
}
</script>
</html>
~~~
> 效果如下
- APP模块
- 欢迎页
- 头部模块
- 底部模块
- 图文列表
- 商品展示
- 文字列表
- 内容页一
- 评论页
- N宫格
- 获得上一级的栏目名称
- 搜索模块
- 图标
- 幻灯模块
- 消息页
- 个人中心
- 个人中心—我的收藏
- 个人中心—资料修改
- 个人中心—我的钱包（账户）
- 咨询页面
- APP模板
- 注册 页面一
- 注册 页面二
- 登录 页面一
- 登录 页面二
- 忘记密码 页面一
- 会员中心 首页一
- 会员中心 首页二
- 会员中心 首页三
- 会员中心 资料修改
- 申请审核步骤
- 商品订单一
- 游戏页面
- 新闻列表页
- 图文列表页
- 商品列表页
- 商品详情页
- 聊天
- 消息列表
- 聊天界面
- 发布需求
- 前端框架
- CSS Framework
- trim 字符处理
- dom 选择器
- 样式
- evt 事件
- 选择元素
- 属性
- 文本
- 位置
- json
- 设置
- 提示
- AJAX
- storage 本地存储
- API对象
- 常用函数
- openWin()
- closeWin()
- apiready
- fixStatusBar(header)
- api.setRefreshHeaderInfo
- api.openFrame
- randomSwitchBtn(index,name)
- APP常用图片
- asd