vant 的使用

<!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>
https://youzan.github.io/vant/#/zh-CN/list
猜你喜欢
