Skip to content

Commit

Permalink
Merge pull request #15 from studygolang/nonespace
Browse files Browse the repository at this point in the history 
Nonespace
  • Loading branch information
@nonespace
nonespace authored Mar 12, 2020
2 parents 9083c2a + 1760eb1 commit 47af14f
Show file tree
Hide file tree
Showing 3 changed files with 260 additions and 80 deletions.
132 changes: 110 additions & 22 deletions src/component/ListContent.vue
View file
Original file line number Diff line number Diff line change
@@ -1,35 +1,35 @@
<template>
<div class="listContent">
<div
v-for="(item, index) in list"
:key="index"
class="article_list"
@click="jumpToDetail('/article/' + item.id)">
<div class="article_list_item">
<div class="article_detail">
<div>
v-for="(item, index) in list"
:key="index"
class="article_list"
>
<div class="article_list_item" >
<div class="article_detail" @click="jumpToDetail('/article/' + item.id)">
<div class="artclie_text_msg">
<div class="article_author">
<img :src="item.author.avatar" alt="">
{{item.author.nickname}}
</div>
<div class="article_title">
{{item.title}}
</div>
<div class="article_description">
{{item.description}}
<img class="img" :src="item.author.avatar" mode='widthFix' alt="" />
<div class="nickname">{{item.author.nickname}}</div>
</div>
<div class="article_title">{{item.title}}</div>
<div class="article_description">{{item.description}}</div>
</div>
<img :src="item.cover" alt="">
<img class="img_cover" v-if="item.cover" :src="item.cover" alt mode='widthFix' />
</div>
<div class="article_other">
<div class="like">
<img class="img" src="http://static.gocoder.top/like.png" alt="" mode="widthFix">
{{item.like}}
</div>
<div class="acticle_comments">
<img class="img" src="http://static.gocoder.top/comment.png" style="" alt="" mode="widthFix" >
{{item.comments}}
</div>
<div class="acticle_share">
分享
<wx-button open-type="share" style="background:#fff">
<img class="img" src="http://static.gocoder.top/share.png" style="" alt="" mode="widthFix">
</wx-button>
</div>
</div>
</div>
Expand All @@ -43,18 +43,106 @@ import Vue from 'vue'
export default Vue.extend({
name: 'ListContent',
data() {
return {
}
return {}
},
methods: {
jumpToDetail(url) {
window.location.href = url
},
}
},
props: ['list'],
props: ['list']
})
</script>
<style lang="less">
.ellipsis{
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
white-space: normal !important;
word-break:break-all;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.listContent {
.article_list_item {
box-sizing: border-box;
background: #fff;
margin-bottom: 20rpx;
.article_detail {
box-sizing: border-box;
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #F5F6F6;
padding:20rpx 40rpx ;
.artclie_text_msg{
flex: 1;
}
.article_author {
display: flex;
align-items: center;
padding-bottom: 16rpx;
.img {
height: 40rpx;
width: 40rpx;
border-radius: 50%;
}
.nickname {
font-size: 24rpx;
color: rgba(102, 102, 102, 1);
margin-left: 11rpx;
}
}
.article_title{
font-size: 36rpx;
color: #333333;
.ellipsis
}
.article_description{
color: #999999;
font-size: 28rpx;
.ellipsis;
}
}
.img_cover {
width: 160rpx;
height: 160rpx;
border-radius: 4px;
display: inline-block;
margin-left: 40rpx;
}
.article_other{
display: flex;
color: #999999;
font-size: 28rpx;
height: 88rpx;
align-items: center;
>div{
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.img{
height: 28rpx;
width: 30rpx;
margin-right: 10rpx;
}
.acticle_comments{
.img{
width: 35rpx;
}
}
}
}
}
</style>
92 changes: 34 additions & 58 deletions src/home/Index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,90 +1,68 @@
<template>
<div class="cnt">
<div class="home">
<KSwiper
:indicator-dots="indicatorDots"
:circular="circularFlag"
:autoplay="autoplay"
:duration="duration"
:interval="interval"
>
<KSwiperItem
v-for="(item,index) in background"
:key="index" >
<KSwiperItem v-for="(item,index) in background" :key="index">
<KView :class="'swiper-item '+ item">
<img :src="bannerImg" class="banner-item"/>
<img :src="bannerImg" class="banner-item" mode='widthFix'/>
</KView>
</KSwiperItem>
</KSwiper>
<Tabs />

<tabs></tabs>
<wx-button open-type="share" @click="onClickShare">分享</wx-button>

<!-- 引用列表内容组件 -->
<list-content :list="list"></list-content>
<!-- <tabs></tabs>
<wx-button open-type="share" @click="onClickShare">分享</wx-button>-->
</div>
</template>

<script>
import Vue from 'vue'
import Header from '../common/Header.vue'
import Footer from '../common/Footer.vue'
import Tabs from './Tabs/Index.vue'
import Web from 'reduce-loader!../common/Web.vue'
import 'reduce-loader!./web'
import ListContent from '../component/ListContent.vue'
export default Vue.extend({
name: 'Home',
components: {
Header,
Footer,
Web,
ListContent
Tabs
},
data() {
return {
interval: 2380,
autoplay: true,
indicatorDots: true,
autoplay: false,
indicatorDots: false,
circularFlag: true,
duration: 1200,
background: [
'https://wechat-1251018873.file.myqcloud.com/images/banner.png',
'https://wechat-1251018873.file.myqcloud.com/images/banner.png',
'https://wechat-1251018873.file.myqcloud.com/images/banner.png',
'https://wechat-1251018873.file.myqcloud.com/images/banner.png'
],
current: 1,
navList: [
{ label: '最新', key: 'newest' },
{ label: '专栏', key: 'column' },
{ label: '最新', key: 'pay' }
],
bannerImg: 'https://wechat-1251018873.file.myqcloud.com/images/banner.png',
list: [{
id: 1,
author: {
id: 1,
nickname: '用户1',
avatar: 'https://avatars0.githubusercontent.com/u/44227678?s=88&v=4',
},
title: '测试文章1的标题',
description: '测试文章1的描述',
cover: 'https://wechat-1251018873.file.myqcloud.com/images/banner.png',
like: 6,
comments: 6,
}, {
id: 2,
author: {
id: 2,
nickname: '用户2',
avatar: 'https://avatars2.githubusercontent.com/u/33213215?s=80&v=4',
},
title: '测试文章2的标题',
description: '测试文章2的描述',
cover: 'https://wechat-1251018873.file.myqcloud.com/images/banner.png',
like: 16,
comments: 26,
}]
}
},
created() {
window.addEventListener('wxload', query => console.log('page1 wxload', query))
window.addEventListener('wxload', query =>
console.log('page1 wxload', query)
)
window.addEventListener('wxshow', () => console.log('page1 wxshow'))
window.addEventListener('wxready', () => console.log('page1 wxready'))
window.addEventListener('wxhide', () => console.log('page1 wxhide'))
window.addEventListener('wxunload', () => console.log('page1 wxunload'))
if (process.env.isMiniprogram) {
console.log('I am in miniprogram')
// For Dean Test Passport.
Expand All @@ -111,29 +89,27 @@ export default Vue.extend({
onClickJump() {
window.location.href = '/test/list/123'
},
onClickOpen() {
window.open('/test/detail/123')
},
onClickShare() {
console.log('I am in miniprogram')
},
},
navChange(val) {
try {
this.current = val.$_detail.current
} catch (error) {
console.log(error)
}
}
}
})
</script>

<style lang="less">
.cnt {
margin-top: 20px;
}
a, button {
display: block;
width: 100%;
height: 30px;
line-height: 30px;
text-align: center;
font-size: 20px;
border: 1px solid #ddd;
}
.miniprogram-root {
.for-web {
display: none;
Expand Down
Loading

0 comments on commit 47af14f

Please sign in to comment.