home九宫格 ---news/newslist

作者: 悟空你又瘦了 | 来源:发表于2017-07-03 00:46 被阅读0次

home九宫格 ---news/newslist
信息搜集｜“思维100”STEM英语应用能力训练活动
转载：vue 路由导航动态设置当前菜单的高亮状态
Vue-router(路由)的嵌套
2020-04-18 Particle Physics at H
2019-07-17
高德地图笔记
【邻聚】转｜谁动了小区的公共利益？
转发一篇好的文章---与死亡打交道十年后，我明白了该怎么好好活着
组件引入挂载

home九宫格

<template>
    <div class="tmp1">
        <!-- 1.0 轮播使用的mint-ui中的swipe组件 -->
        <mt-swipe :auto="2000">
          <mt-swipe-item v-for="item in swipeList" >
          <a :href="item.url">
            ![](item.img)
          </a>
          </mt-swipe-item>   
        </mt-swipe>
        <!-- 2.0 9宫格导航区域 使用的mui中的9宫格样式 -->
        <div class="mui-content">
                <ul class="mui-table-view mui-grid-view mui-grid-9">
                    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
         //a换成router-link,同时配置路由方式
                    <router-link to="/news/newslist">
                            <span class="mui-icon mui-icon-home">                               
                            </span>
                            <div class="mui-media-body">新闻资讯</div></router-link></li>
                    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                            <span class="mui-icon mui-icon-email"></span>
                            <div class="mui-media-body">图片分享</div></a></li>
                    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                            <span class="mui-icon mui-icon-chatbubble"></span>
                            <div class="mui-media-body">商品购买</div></a></li>
                    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                            <span class="mui-icon mui-icon-location"></span>
                            <div class="mui-media-body">留言反馈</div></a></li>
                    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                            <span class="mui-icon mui-icon-search"></span>
                            <div class="mui-media-body">视频专区</div></a></li>
                    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                            <span class="mui-icon mui-icon-phone"></span>
                            <div class="mui-media-body">联系我们</div></a></li>             
                </ul> 
        </div>
    </div>
</template>
<script>
export default{
    data(){
        return {
            swipeList:[
                     {
                    url: "http://www.itcast.cn/subject/phoneweb/index.html",
                    img: "http://ofv795nmp.bkt.clouddn.com/vuelogobanner1.jpg"
                    },
                     {
                    url: "http://www.itcast.cn/subject/phoneweb/index.html",
                    img: "http://ofv795nmp.bkt.clouddn.com/vuelogobanner2-1.jpg"
                    }
               ]
        }
    },
    methods:{
    //  // 1.0 获取轮播图数据
    //  getimglist(){
    //      this.$http.get('http://vuecms.ittun.com/api/getlunbo')
    //      .then(res=>{
    //          // 将数据赋值给swipeList属性，自动导致v-for重新执行
    //          this.swipeList = res.body.message;
    //      });
    //  }
    // },
    // created(){
    //  //当进入Home.vue组件的时候请求数据
    //  this.getimglist();
    }
}   
</script>
<style scoped>
    .mint-swipe{
        height: 200px;
    }
    .mint-swipe img{
        width: 100%;
    }
    .mint-swipe-item{       
        color:white;
    }
//背景改成白色
    .mui-content ul{
         background: #fff;
    }
//去掉边框
    .mui-grid-view.mui-grid-9 .mui-table-view-cell{
         border-right: 0;
         border-bottom: 0;
    }
//设置放图片div的大小,位置
  .mui-icon-home,
 .mui-icon-email,
 .mui-icon-chatbubble,
.mui-icon-location,
.mui-icon-search,
.mui-icon-phone{
    display: block;
    width: 50px;
    height: 50px;
    /*图片大,设置图片环绕,就可以了*/
    background-repeat: round;
    margin-left: 24px;
}
//更换背景图片
.mui-icon-home{
    background-image: url(../../static/imgs/menu3.png);
}
.mui-icon-email{
background-image: url(../../static/imgs/menu4.png);
}
.mui-icon-chatbubble{
background-image: url(../../static/imgs/menu5.png);
}

.mui-icon-location{
background-image: url(../../static/imgs/menu6.png);
}
.mui-icon-search{
background-image: url(../../static/imgs/menu9.png);
}
.mui-icon-phone{
background-image: url(../../static/imgs/menu10.png);
}
//将以前伪类对应的图片清空
.mui-icon-home:before,
.mui-icon-email:before,
.mui-icon-chatbubble:before,
.mui-icon-location:before,
.mui-icon-search:before,
.mui-icon-phone:before{
    content: ''
}
</style>

index.js里面引入路由

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import newslist from '@/components/news/newslist'
Vue.use(Router)
export default new Router({
    linkActiveClass:'mui-active', //将激活的路由添加一个mui-active类名称
routes:[
      {path:'/Home',component:Home},
      {path:'/news/newslist',component:newslist},
  ]
})

news/newslist

<template >
 <div class="tmp1"> 
 <ul class="mui-table-view">
   <!--   <li class="mui-table-view-cell mui-media">
                    <a href="javascript:;">
                        ![](../images/shuijiao.jpg)
                        <div class="mui-media-body">
                            幸福
                            <p class='mui-ellipsis'>能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
                        </div>
                    </a>
                </li> -->
    <li v-for="item in newslist" class="mui-table-view-cell mui-media">
                    <a href="javascript:;">
                        ![](item.img_url)
                        <div class="mui-media-body">
                            {{item.title}}
                        <p class='mui-ellipsis'>{{item.add_time}}</p><span>{{item.click}}</span>
                        </div>
                    </a>
                </li>
    </ul>
  </div>    
</template>
<script>
    export default{
        methods:{
            // 1.0 获取新闻数据列表
            getnewslist(){
                var url = 'http://vuecms.ittun.com/api/getnewslist'
                this.$http.get(url).then(res=>{
                    if(res.body.status !==0){
                        Toast(res.body.message);
                        return ;
                    }
                    // 正常逻辑处理
                    this.newslist = res.body.message;
                });
            }
        },
        created(){
            this.getnewslist();
        },
        data(){
             return {
                newslist:[
                    {
                        id: 13,
                        title: "1季度多家房企利润跌幅超50% 去库存促销战打响",
                        add_time: "2015-04-16T03:50:28.000Z",
                        zhaiyao: "房企一季度销售业绩已经陆续公布，克而瑞研究中心统计",
                        click: 1,
                        img_url: "http://ofv795nmp.bkt.clouddn.com//upload/201504/16/201504161149414479.jpg"
                        },
                        {
                        id: 14,
                        title: "买房还是炒股，2015年买房无法拒绝的5大理由",
                        add_time: "2015-04-16T04:05:34.000Z",
                        zhaiyao: "转眼间2015年已经过去了4个月，在这短短的四个月",
                        click: 2,
                        img_url: "http://ofv795nmp.bkt.clouddn.com//upload/201504/16/201504161205596364.jpg"
                        }
                ]
            }

        }
    }
</script>
<style scoped>
    .mui-table-view span{
        position: absolute;
        top: 27px;
        right: 0;
    }
    .mui-table-view .mui-ellipsis{
        margin-top: 10px;
    }
</style>