<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<script src="js/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@beta/lib/index.css">
<!-- 引入组件 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.bootcss.com/qs/6.5.2/qs.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@beta/lib/vant.min.js"></script>
</head>
<body>
<div id="app">
<van-search v-model="title"
placeholder="请输入搜索关键词"
show-action
shape="round"
@search="onSearch">
<div slot="action" @click="onSearch">搜索</div>
</van-search>
<div style="overflow-x:auto;" id="lis">
<van-list v-model="loading"
:finished="finished"
@load="onLoad">
<van-cell v-for="item in list"
:key="item.c_id"
:title="item.c_title"
@click="lstClick(item.c_id)" />
</van-list>
</div>
</div>
</body>
</html>
<script>
var vue = window.Vue;
var vant = window.vant;
// 注册组件
Vue.use(vant);
const ajax = window.axios.create()
boxheight()
function boxheight() {
//获取浏览器窗口高度
var winHeight = 0
if (window.innerHeight)
winHeight = window.innerHeight
else if ((document.body) && (document.body.clientHeight))
winHeight = document.body.clientHeight
//通过Document对body进行检测,获取浏览器可视化高度
if (document.documentElement && document.documentElement.clientHeight)
winHeight = document.documentElement.clientHeight
if (winHeight > 100) {
winHeight = winHeight - 80
}
//DIV高度为浏览器窗口高度
document.getElementById("lis").style.height = winHeight + "px"
}
window.onresize = boxheight;
new Vue({
el: '#app',
data() {
return {
list: [],
loading: false,
finished: false,
title: ''
}
},
methods: {
onLoad() {
ajax({
url: 'http://localhost/lgum.sf.api/api/Logic/GetMsgSendList?title=' + this.title + '&type=' + this.getUrlParam('type'),
method: 'get'
}).then((re) => {
if (re.data.success) {
this.list = re.data.data
this.loading = false
this.finished = true
}
})
},
getUrlParam(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)")
var r = window.location.search.substr(1).match(reg)
if (r != null) return unescape(r[2]); return null
},
onSearch() {
this.onLoad()
},
lstClick(id) {
window.open("http://localhost/lgum.sf/msg/msgSendContent.html?id=" + id)
}
}
})
</script>
vant 的使用
最新推荐文章于 2024-08-07 17:03:10 发布