找回密码
当前位置：前端开发者 > Vue.js > 正文

Vue.js前端开发快速入门与专业应用_切换列表实例

2018-07-16 分类：Vue.js 阅读(640) 评论(0)

vue.js 前端开发|vue前端开发使用哪些工具|微信开发前端vue

github地址：https://github.com/doterlin/vue_ajax_list_example

建议切换到手机分辨率下查看演示：
html 代码

<!DOCTYPE html>
<head>
    <meta charset=”utf-8″>
    <meta content=”width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no” name=”viewport”>
    <meta content=”yes” name=”apple-mobile-web-app-capable”>
    <meta content=”black” name=”apple-mobile-web-app-status-bar-style”>
    <meta content=”telephone=no” name=”format-detection”>
    <meta content=”email=no” name=”format-detection”>
    <title>vue前端开发的完整技术栈:列表</title>
    <link rel=”stylesheet” href=”https://doterlin.github.io/blog/vuejs/vue_ajax_list_example/css/style.css”>
    <script type=”text/javascript” src=”https://doterlin.github.io/blog/vuejs/vue_ajax_list_example/js/vue.min.js”></script>
</head>
<body>
    <!– container –>
    <div class=”container” id=”toggle”>
        <div class=”tab”>
            <a href=”javascript:;” v-for=”item in tabBtns” class=”tab-btn{{item.onClass}}” style=”” v-on:click=”toggleList”>{{ item.text }}</a>
            <div class=”line” id=’tab-line’ v-bind:style=”{left:lineLeft+’%’}”></div>
        </div>
        <!– rank weekly –>
        <ul class=”ranks ranks-week” v-show=”ranksWeekShow” transition=”fade”>
            <li v-for=”item in ranksWeek” class=”rank rank-{{ $index+1 }}”>
                <!– 前三名显示皇冠 –>
                <div class=”left”>
                    <i v-if=”$index<3″ class=”icons icon_{{ $index+1 }}”>1</i>
                    <span v-else>{{ $index+1 }}</span>
                </div>
                <div class=”center”>
                    <div class=”portrait”>
                        <img class=”por-img” width=”41″ height=”41″ v-bind:src=”‘http://protrait.api.itsme.media/scaleimage.php?w=82&h=82&url=’+item.uinfo.portrait”>
                    </div>
                    <div class=”name”>{{ item.uinfo.nick }}</div>
                    <div class=”sex”>
                        <i class=”icons icon_{{ item.uinfo.gender == 0? ‘girl’:’boy’ }}”></i>
                    </div>
                    <level :ulevel=”item.uinfo.ulevel”></level>
                </div>
                <div class=”right”>
                    <span class=”num”>{{ item.fans }}</span>
                    <div class=”icons icon_fans”></div>
                </div>
            </li>
        </ul>
        <!–/ rank weekly –>
        <!– rank total –>
        <ul class=”ranks ranks-total” v-show=”!ranksWeekShow” transition=”fade”>
            <li v-for=”item in ranksAll” class=”rank rank-{{ $index+1 }}”>
                <!– 前三名显示皇冠 –>
                <div class=”left”>
                    <i v-if=”$index<3″ class=”icons icon_{{ $index+1 }}”>1</i>
                    <span v-else>{{ $index+1 }}</span>
                </div>
                <div class=”center”>
                    <div class=”portrait”>
                        <img class=”por-img” width=”41″ height=”41″ v-bind:src=”‘http://protrait.api.itsme.media/scaleimage.php?w=82&h=82&url=’+item.uinfo.portrait”>
                    </div>
                    <div class=”name”>{{ item.uinfo.nick }}</div>
                    <div class=”sex”>
                        <i class=”icons icon_{{ item.uinfo.gender == 0? ‘girl’:’boy’ }}”></i>
                    </div>
                    <level :ulevel=”item.uinfo.ulevel”></level>
                </div>
                <div class=”right”>
                    <span class=”num”>{{ item.fans }}</span>
                    <div class=”icons icon_fans”></div>
                </div>
            </li>
        </ul>
        <!–/ rank total –>
    </div>
    <!–/ container –>
    <script type=”text/javascript” src=”https://doterlin.github.io/blog/vuejs/vue_ajax_list_example/js/zepto.min.js”></script>
    <script type=”text/javascript”>
        $(function () {
            //组件事例:等级组件，显示不同等级的图标和颜色（类似QQ等级，有太阳、月亮、星星…）
            vue.component(‘level’, {
                template: ‘<div class=”level level{{ levelTheme }}”> <i class=”icons icon_level_{{ levelTheme }}”></i> <span class=”num”>{{ ulevel }}</span> </div>’,
                props: [‘levelTheme’, ‘ulevel’],
                ready: function () {
                    var _level = parseInt(this.ulevel);
                    this.levelTheme = getTheme(_level);
                    function getTheme(level) {
                        if (1 <= level && level <= 2) {
                            return 1;
                        } else if (3 <= level && level <= 4) {
                            return 2;
                        } else if (5 <= level && level <= 6) {
                            return 3;
                        } else if (7 <= level && level <= 8) {
                            return 4;
                        } else if (9 <= level && level && level <= 10) {
                            return 5;
                        } else if (10 <= level && level <= 11) {
                            return 6;
                        } else {
                            return 6;
                        }
                    }
                }
            })
            //实例
            var toggle = window.toggle = new vue({
                el: ‘#toggle’,
                data: {
                    lineLeft: ‘8%’,
                    tabBtns: [{ //选项卡按钮
                        onClass: ‘ on’,
                        text: ‘周榜’,
                        listName: ‘weekly’
                    }, {
                        onClass: ”,
                        text: ‘总榜’,
                        listName: ‘all’
                    }],
                    ranksWeekShow: true,
                    ranksWeek: ”, //排行榜数据,初始值为空,ajax读取数据后再更新,View层也会更新(双向绑定)
                    ranksAll: ”
                },
                ready: function () { //实例开始时执行的函数
                    this.getListData(‘weekly’);
                    this.getListData(‘all’);
                },
                methods: { //vue实例自定义的方法,备调用
                    toggleList: function (event) { //切换榜单类型
                        var el = event.currentTarget;
                        var index = $(el).index();
                        //切换tab
                        $(el).addClass(‘on’).siblings().removeClass(‘on’);
                        this.lineLeft = (index) * 46 + 8;
                        ///切换rank列表
                        this.ranksWeekShow = !this.ranksWeekShow;
                    },
                    getListData: function (type) { //获取ajax数据,type参数为榜单类型,可能值: ‘weekly’,’all’
                        var ts = this; //保存this对象,防止this引用错误
                        var url = ‘http://www.itsme.media/mobile/proxy/mgr/RankFans.php?area=th&cycle=’ + type;
                        $.getJSON(url, function (res) {
                            if (type == ‘weekly’) { //如果是周榜,则更新this.ranksweek
                                ts.ranksWeek = res.ranks;
                            } else {
                                ts.ranksAll = res.ranks;
                            }
                        })
                    }
                }
            });
        })
    </script>
</body>
</html>
vue_ajax_list_example

一个简单的vue.js+Ajax+zepto可切换列表实例，在学习vuejs就找了这个例子重勾了一下。希望能对大家有帮助。<br>
这个例子包含了vue.js的for,show ,if等命令，并写了一个小组件，结合zepto做了ajax数据交互演示，基本涵盖新手可能需要看到的示例点。写得不好，欢迎各位Issues。

下载
使用git：git clone https://github.com/doterlin/vue_ajax_list_example.git
适用于移动端

做了一些自适应，css里面包含一些简化的reset移动端（重置默认样式）,可以参考作为移动端开发的base样式。

vue.js大概是一个青量的MVVM框架（不依赖任何第三方库，所以这里可以不适用zepto）,这个就不多说了吧。<br>
可以看看官网资料：vue.js官网

zepto.js
算是一个缩水版的jQeury，一般用在移动端。zepto文档
运行

直接运行index.html即可查看效果；

注意

ajax用的是一个线上的可跨域地址

web前端开发技术常用选题|开发vue前端工具|vue前端开发环境搭建

赞(0)
前端开发者 » Vue.js前端开发快速入门与专业应用_切换列表实例
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论