代码展示
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" href="{$resource}css/mui.min.css">
<link rel="stylesheet" href="{$resource}css/app.css"/>
<style type="text/css">
.searchcontent{width: 100%;height: 40px;line-height: 40px;background: white;}
.leftjt{width:20px;height: 20px;margin-top: 10px;float: left;}
.close{display: inline-block;width: 16%;height: 28px;line-height: 13px;margin-top: 6px;}
.searchinput{width: 71%;height: 28px;line-height: 28px;margin-left: 2%;border-radius: 5px;border: none;background: #F1F1F1;text-align: center;}
#pullrefresh{top: 40px;}
.productinfo{width: 45%;margin-left: 3.3333%;margin-bottom: 10px;display: inline-block;background: white;padding-top: 10px;}
.productimg {width: 90%;height: 155px;margin-left: 5%;}
.productname,.originalprice,.product_xinxi {width: 90%;margin-left: 5%;}
.productname {font-size: 13px;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;height: 42px;}
.originalprice {font-size: 8px;color: #999999;height: 20px;line-height: 20px;}
.product_xinxi {color: crimson;height: 20px;line-height: 20px;}
.p_money {font-size: 16px;margin-bottom: 5px;font-weight: 600;}
.salesvolume {float: right;font-size: 8px;font-weight: 500;color: #999999;}
.mui-table-view{background: #F1F1F1;}
</style>
</head>
<body>
<div id="searchproduct" class="mui-content">
<div class="searchcontent">
<img class="leftjt mui-action-back" src="{$resource}images/zuojt.png"/>
<input @keypress="searchGoods" type="serch" v-model="keywords" placeholder="请输入搜索关键字" class="searchinput"/>
<button @click="setkeywords" class="close">搜索</button>
</div>
<!--下拉刷新容器-->
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<div id="closehtml" class="mui-table-view mui-table-view-chevron">
</div>
</div>
</div>
</div>
<script src="{$resource}js/mui.min.js"></script>
<script src="{$resource}js/vue.min.js"></script>
<script type="text/javascript">
var page = 1;
var count = 0;
var status = 1;
var productstatus = 0;
var ifsearch = 0;
var product = new Array();
var i_keyword = "";
//调用getUrlParam方法获取跳转链接参数
var groupid = getUrlParam("groupid");
//获取跳转链接url参数方法
function getUrlParam(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
var r = window.location.search.substr(1).match(reg); //匹配目标参数
if (r != null) {
return unescape(r[2]);
} else {
return null; //返回参数值
}
}
mui.init({
pullRefresh: {
container: '#pullrefresh',
up: {
contentrefresh: '正在加载...',
callback: pullupRefresh
}
}
});
var count = 0;
//上拉加载具体业务实现
function pullupRefresh(keyword) {
//输入状态不为空调用getProducthtml接口获取数据
if(ifsearch==1){
getProducthtml(i_keyword);
}
setTimeout(function() {
//接口数据状态有数据为0无数据为1
if(status==0){
var closehtml = document.getElementById("closehtml");
mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count>=page)); //参数为true代表没有更多数据了。
var table = document.body.querySelector('.mui-table-view');
var cells = document.body.querySelectorAll('.mui-table-view-cell');
for (var i = cells.length, len = i + product.length; i < len; i++) {
var li = document.createElement('div');//创建一个div元素
li.className = 'productinfo';//生成class类名为productinfo
//在productinf下生成的数据
li.innerHTML = '<img class="productimg" src="'+product[i].product_pic+'"/><div class="productname">'+product[i].product_name+'</div><div class="originalprice">原价<s>￥'+product[i].market_price+'</s></div><div class="product_xinxi"><span class="p_money">￥'+product[i].shop_price+'</span><span class="salesvolume">销量'+product[i].product_sales+'</span></div>';
table.appendChild(li);
}
}else{
//无数据显示没有更多数据了设状态为(true)
mui('#pullrefresh').pullRefresh().endPullupToRefresh((true));
}
},300);
}
//获取商品列表
function getProducthtml(keywords){
mui.get('{:u('Product/getProducthtml')}',//改成你自己的接口
{
groupid:groupid,
elemlen:page,
keywords:keywords,
status:"",
},
function(data){
++productstatus;
if(data.status==1){
product = data.info;
++page;
status=0;
}else{
status=1;
if(product==""){
mui.toast("没有搜索到该商品")
}
}
},'json'
)
}
//初始化vue
var vm = new Vue({
el:"#searchproduct",
data:{
keywords:""
},
created:function(){
var that = this;
},
methods:{
//搜索框搜索
setkeywords:function(){
this.searchdata();
},
//移动端虚拟键盘搜索
searchGoods:function(event){
if (event.keyCode == 13) { //如果按的是enter键 13是enter
event.preventDefault(); //禁止默认事件（默认是换行）
this.searchdata();
}
},
//搜索
searchdata:function(){
i_keyword = this.keywords;
if(i_keyword!=""){
ifsearch = 1; //不为空状态\
//用户再次搜索清空所有数据重新渲染
document.getElementById("closehtml").innerHTML = "";
product = [];
page = 1;
count = 0;
//重新激活上拉加载
mui('#pullrefresh').pullRefresh().refresh(true);
//调用上拉加载
pullupRefresh(i_keyword);
}else{
mui.toast("搜索内容不能为空")
}
}
}
})
</script>
</body>
</html>