代碼展示
<!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>