您的位置：首页 > 产品设计 > UI/UE

关于使用weui.io的界面修改，已经weui中<a>标签调用script中的内容为空的解决

2018-01-26 18:56 489 查看
由于在微信公众号中的界面需要，要把weui.io的界面改成自己的，内容也要改成自己的。最后总结出的界面内容是：

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>weui修改的页面</title>
<link rel="stylesheet" href="../style/weui.css"/>
<link rel="stylesheet" href="./example.css"/>
</head>
<body >
<div class="weui-toptips weui-toptips_warn js_tooltips">错误提示</div>

<div class="container" id="container"></div>

<script type="text/html" id="tpl_home">
<div class="page">
<div class="page__hd">
<font size="5">weui页面修改</font>
</div>
<div class="page__bd page__bd_spacing">
<ul>
<li>
<div class="weui-flex js_category">
<p class="weui-flex__item">一、修改页面</p>
<img src="./images/icon_nav_userenter.jpg" alt="">
</div>
<div class="page__category js_categoryInner">
<div class="weui-cells page__category-content">
<a class="weui-cell weui-cell_access js_item" data-id="article" href="javascript:;">
<div class="weui-cell__bd">
<p>1、进入页面</p>
</div>
<div class="weui-cell__ft"></div>
</a>
</div>
</div>
</li>
</ul>
</div>

</div>
<script type="text/javascript">
$(function(){
var winH = $(window).height();
var categorySpace = 10;

$('.js_item').on('click', function(){
var id = $(this).data('id');
window.pageManager.go(id);
});
$('.js_category').on('click', function(){
var $this = $(this),
$inner = $this.next('.js_categoryInner'),
$page = $this.parents('.page'),
$parent = $(this).parent('li');
var innerH = $inner.data('height');
bear = $page;

if(!innerH){
$inner.css('height', 'auto');
innerH = $inner.height();
$inner.removeAttr('style');
$inner.data('height', innerH);
}

if($parent.hasClass('js_show')){
$parent.removeClass('js_show');
}else{
$parent.siblings().removeClass('js_show');

$parent.addClass('js_show');
if(this.offsetTop + this.offsetHeight + innerH > $page.scrollTop() + winH){
var scrollTop = this.offsetTop + this.offsetHeight + innerH - winH + categorySpace;

if(scrollTop > this.offsetTop){
scrollTop = this.offsetTop - categorySpace;
}

$page.scrollTop(scrollTop);
}
}
});
});
</script>
</script>

<script type="text/html" id="tpl_article">
<div class="page">
<div class="page__hd">
<h1 class="page__title">Article</h1>
<p class="page__desc">文章</p>
</div>
<div class="page__bd">
<article class="weui-article">
<h1>大标题</h1>
<section>
<h2 class="title">章标题</h2>
<section>
<h3>1.1 节标题</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</p>
<p>
<img src="./images/pic_article.png" alt="">
<img src="./images/pic_article.png" alt="">
</p>
</section>
<section>
<h3>1.2 节标题</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
</section>
</article>
</div>
</div>
</script>

<script src="./zepto.min.js"></script>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="https://res.wx.qq.com/open/libs/weuijs/1.0.0/weui.min.js"></script>
<script src="./example.js"></script>
</body>
</html>

在1、进入页面的那个<div>中的<a>标签中的

<div class="page__category js_categoryInner">
<div class="weui-cells page__category-content">
<a class="weui-cell weui-cell_access js_item" data-id="article" href="javascript:;">
<div class="weui-cell__bd">
<p>1、进入页面</p>
</div>
<div class="weui-cell__ft"></div>
</a>
</div>
</div>

data-id="article"对应的是： <script type="text/html" id="tpl_article"></script>

中id="tpl_article"中的"article"。
解释一下example.js存在的意义：主要是控制页面内容中大小。使用这个weui.io下的这个页面，点击进去内容目前显示是在<script type="test/html" id="tpl_article"></script>内，只要<a>标签中data-id的内容对应<script>标签中id的"tpl_"后的内容就可。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航