Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 47af14f

Browse files
nonespacenonespace
authored
Merge pull request #15 from studygolang/nonespace
Nonespace
2 parents 9083c2a + 1760eb1 commit 47af14f

File tree

3 files changed

+260
-80
lines changed

3 files changed

+260
-80
lines changed

‎src/component/ListContent.vue

Lines changed: 110 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,35 @@
11
<template>
22
<div class="listContent">
33
<div
4-
v-for="(item, index) in list"
5-
:key="index"
6-
class="article_list"
7-
@click="jumpToDetail('/article/' + item.id)">
8-
<div class="article_list_item">
9-
<div class="article_detail">
10-
<div>
4+
v-for="(item, index) in list"
5+
:key="index"
6+
class="article_list"
7+
>
8+
<div class="article_list_item" >
9+
<div class="article_detail" @click="jumpToDetail('/article/' + item.id)">
10+
<div class="artclie_text_msg">
1111
<div class="article_author">
12-
<img :src="item.author.avatar" alt="">
13-
{{item.author.nickname}}
14-
</div>
15-
<div class="article_title">
16-
{{item.title}}
17-
</div>
18-
<div class="article_description">
19-
{{item.description}}
12+
<img class="img" :src="item.author.avatar" mode='widthFix' alt="" />
13+
<div class="nickname">{{item.author.nickname}}</div>
2014
</div>
15+
<div class="article_title">{{item.title}}</div>
16+
<div class="article_description">{{item.description}}</div>
2117
</div>
22-
<img :src="item.cover" alt="">
18+
<img class="img_cover" v-if="item.cover" :src="item.cover" alt mode='widthFix' />
2319
</div>
2420
<div class="article_other">
2521
<div class="like">
22+
<img class="img" src="http://static.gocoder.top/like.png" alt="" mode="widthFix">
2623
{{item.like}}
2724
</div>
2825
<div class="acticle_comments">
26+
<img class="img" src="http://static.gocoder.top/comment.png" style="" alt="" mode="widthFix" >
2927
{{item.comments}}
3028
</div>
3129
<div class="acticle_share">
32-
分享
30+
<wx-button open-type="share" style="background:#fff">
31+
<img class="img" src="http://static.gocoder.top/share.png" style="" alt="" mode="widthFix">
32+
</wx-button>
3333
</div>
3434
</div>
3535
</div>
@@ -43,18 +43,106 @@ import Vue from 'vue'
4343
export default Vue.extend({
4444
name: 'ListContent',
4545
data() {
46-
return {
47-
}
46+
return {}
4847
},
4948
methods: {
5049
jumpToDetail(url) {
5150
window.location.href = url
52-
},
51+
}
5352
},
54-
props: ['list'],
53+
props: ['list']
5554
})
56-
5755
</script>
5856
<style lang="less">
57+
.ellipsis{
58+
display: -webkit-box;
59+
60+
overflow: hidden;
61+
62+
text-overflow: ellipsis;
5963
64+
word-wrap: break-word;
65+
66+
white-space: normal !important;
67+
word-break:break-all;
68+
69+
-webkit-line-clamp: 2;
70+
71+
-webkit-box-orient: vertical;
72+
73+
}
74+
.listContent {
75+
.article_list_item {
76+
box-sizing: border-box;
77+
background: #fff;
78+
margin-bottom: 20rpx;
79+
.article_detail {
80+
box-sizing: border-box;
81+
display: flex;
82+
width: 100%;
83+
justify-content: space-between;
84+
align-items: center;
85+
border-bottom: 1px solid #F5F6F6;
86+
padding:20rpx 40rpx ;
87+
.artclie_text_msg{
88+
flex: 1;
89+
}
90+
.article_author {
91+
display: flex;
92+
align-items: center;
93+
padding-bottom: 16rpx;
94+
.img {
95+
height: 40rpx;
96+
width: 40rpx;
97+
border-radius: 50%;
98+
}
99+
.nickname {
100+
font-size: 24rpx;
101+
color: rgba(102, 102, 102, 1);
102+
margin-left: 11rpx;
103+
}
104+
}
105+
.article_title{
106+
font-size: 36rpx;
107+
color: #333333;
108+
.ellipsis
109+
}
110+
.article_description{
111+
color: #999999;
112+
font-size: 28rpx;
113+
.ellipsis;
114+
}
115+
}
116+
.img_cover {
117+
width: 160rpx;
118+
height: 160rpx;
119+
border-radius: 4px;
120+
display: inline-block;
121+
margin-left: 40rpx;
122+
}
123+
.article_other{
124+
display: flex;
125+
color: #999999;
126+
font-size: 28rpx;
127+
height: 88rpx;
128+
align-items: center;
129+
>div{
130+
flex: 1;
131+
display: flex;
132+
justify-content: center;
133+
align-items: center;
134+
}
135+
.img{
136+
height: 28rpx;
137+
width: 30rpx;
138+
margin-right: 10rpx;
139+
}
140+
.acticle_comments{
141+
.img{
142+
width: 35rpx;
143+
}
144+
}
145+
}
146+
}
147+
}
60148
</style>

‎src/home/Index.vue

Lines changed: 34 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,90 +1,68 @@
11
<template>
2-
<div class="cnt">
2+
<div class="home">
33
<KSwiper
44
:indicator-dots="indicatorDots"
55
:circular="circularFlag"
66
:autoplay="autoplay"
77
:duration="duration"
88
:interval="interval"
99
>
10-
<KSwiperItem
11-
v-for="(item,index) in background"
12-
:key="index" >
10+
<KSwiperItem v-for="(item,index) in background" :key="index">
1311
<KView :class="'swiper-item '+ item">
14-
<img :src="bannerImg" class="banner-item"/>
12+
<img :src="bannerImg" class="banner-item" mode='widthFix'/>
1513
</KView>
1614
</KSwiperItem>
1715
</KSwiper>
16+
<Tabs />
1817

19-
<tabs></tabs>
20-
<wx-button open-type="share" @click="onClickShare">分享</wx-button>
21-
22-
<!-- 引用列表内容组件 -->
23-
<list-content :list="list"></list-content>
18+
<!-- <tabs></tabs>
19+
<wx-button open-type="share" @click="onClickShare">分享</wx-button>-->
2420
</div>
2521
</template>
2622

2723
<script>
2824
import Vue from 'vue'
29-
import Header from '../common/Header.vue'
30-
import Footer from '../common/Footer.vue'
25+
import Tabs from './Tabs/Index.vue'
3126
import Web from 'reduce-loader!../common/Web.vue'
3227
import 'reduce-loader!./web'
33-
import ListContent from '../component/ListContent.vue'
3428
3529
export default Vue.extend({
3630
name: 'Home',
3731
components: {
38-
Header,
39-
Footer,
4032
Web,
41-
ListContent
33+
Tabs
4234
},
35+
4336
data() {
4437
return {
4538
interval: 2380,
46-
autoplay: true,
47-
indicatorDots: true,
39+
autoplay: false,
40+
indicatorDots: false,
4841
circularFlag: true,
42+
duration: 1200,
4943
background: [
5044
'https://wechat-1251018873.file.myqcloud.com/images/banner.png',
5145
'https://wechat-1251018873.file.myqcloud.com/images/banner.png',
52-
'https://wechat-1251018873.file.myqcloud.com/images/banner.png',
46+
'https://wechat-1251018873.file.myqcloud.com/images/banner.png'
47+
],
48+
current: 1,
49+
navList: [
50+
{ label: '最新', key: 'newest' },
51+
{ label: '专栏', key: 'column' },
52+
{ label: '最新', key: 'pay' }
5353
],
5454
bannerImg: 'https://wechat-1251018873.file.myqcloud.com/images/banner.png',
55-
list: [{
56-
id: 1,
57-
author: {
58-
id: 1,
59-
nickname: '用户1',
60-
avatar: 'https://avatars0.githubusercontent.com/u/44227678?s=88&v=4',
61-
},
62-
title: '测试文章1的标题',
63-
description: '测试文章1的描述',
64-
cover: 'https://wechat-1251018873.file.myqcloud.com/images/banner.png',
65-
like: 6,
66-
comments: 6,
67-
}, {
68-
id: 2,
69-
author: {
70-
id: 2,
71-
nickname: '用户2',
72-
avatar: 'https://avatars2.githubusercontent.com/u/33213215?s=80&v=4',
73-
},
74-
title: '测试文章2的标题',
75-
description: '测试文章2的描述',
76-
cover: 'https://wechat-1251018873.file.myqcloud.com/images/banner.png',
77-
like: 16,
78-
comments: 26,
79-
}]
8055
}
8156
},
8257
created() {
83-
window.addEventListener('wxload', query => console.log('page1 wxload', query))
58+
window.addEventListener('wxload', query =>
59+
console.log('page1 wxload', query)
60+
)
8461
window.addEventListener('wxshow', () => console.log('page1 wxshow'))
8562
window.addEventListener('wxready', () => console.log('page1 wxready'))
8663
window.addEventListener('wxhide', () => console.log('page1 wxhide'))
8764
window.addEventListener('wxunload', () => console.log('page1 wxunload'))
65+
8866
if (process.env.isMiniprogram) {
8967
console.log('I am in miniprogram')
9068
// For Dean Test Passport.
@@ -111,29 +89,27 @@ export default Vue.extend({
11189
onClickJump() {
11290
window.location.href = '/test/list/123'
11391
},
92+
11493
onClickOpen() {
11594
window.open('/test/detail/123')
11695
},
96+
11797
onClickShare() {
11898
console.log('I am in miniprogram')
11999
},
120-
},
100+
navChange(val) {
101+
try {
102+
this.current = val.$_detail.current
103+
} catch (error) {
104+
console.log(error)
105+
}
106+
}
107+
}
121108
})
122109
</script>
123110

124111
<style lang="less">
125-
.cnt {
126-
margin-top: 20px;
127-
}
128-
a, button {
129-
display: block;
130-
width: 100%;
131-
height: 30px;
132-
line-height: 30px;
133-
text-align: center;
134-
font-size: 20px;
135-
border: 1px solid #ddd;
136-
}
112+
137113
.miniprogram-root {
138114
.for-web {
139115
display: none;

0 commit comments

Comments
 (0)