tonews(item.id)">
<img :src="item.pic.src" mode="aspectFill" class="litpic2" />
<!-- <img src="../../static/assets/nav1.png" mode="aspectFill" class="litpic2"> -->
<text class="box2-text">{{item.title}}</text>
</div>
</div>
</template>
<script>
const navigator = weex.requireModule("navigator");
export default {
name: 'news-item',
props: {
item: {
pic: {
default: ''
},
title: {
default: ''
},
publishTime: {
default: ''
},
},
type: {
default: 1
},
newsItems: {
type: Array,
default: []
}
},
methods: {
gotonews(item) {
//省略代码
},
}
}
</script>
<style lang="less" scoped>
</style>
在这里需要注意几个点：
- 一个是在weex中文字必须被
<text></text>标签包住才能给到样式否则无效，并且<text></text>标签不能多层嵌套；
- 另外图片标签
<img/>有个resize属性默认是stretch会按照图片区域的宽高比例缩放图片可能图片会变形，这里有三个属性分别是contain（缩放图片以完全装入![]()
区域，可能背景区部分空白）、cover（缩放图片以完全覆盖![]()
区域，可能图片部分看不见）、stretch（默认值. 按照![]()
区域的宽高比例缩放图片）。具体表现样式参见weex文档image组件。
文章详情界面
同样可以从分解图中看到文章详情大体上分为两个个部分：文章标题，文章内容（富文本）
文章列表数据结构
"article": {
"id": 7019,//文章id
"cid": "2",//分类id
"title": "Super Star吉他谱_S.H.E_弹唱谱扫弦版",//文章标题
"author": "爱尚吉他",
"haspic": 1,
"pic": {
"url": "/21562a414_lit.jpg"//封面
},
"keywords": "Super,Star,吉他,S.H.E,弹唱,谱扫,弦版",//关键词
"description": "Super Star吉他谱，扫弦版编配",//描述
"pubdate": "2018-02-03 21:55:23",
"postime": "1517666123",
"good": "0",
"bad": "0",
"favorite": "0",
"comments": 0,
"body": "Super ",//文章详情（富文本）
}
详情布局代码
//busi/news/detail.vue省略n多代码
<template>
<div class="app" style="background-color: #fff">
<my-header title="文章详情" @rightClick="refresh">
<image slot="right" src="root:img/assets/refresh.png" style="width:40px;height:40px;position:absolute;right:30px;bottom:30px;"/>
</my-header>
<scroller>
<div class="publish">
<text class="title">{{item.title==''?'爱尚吉他':item.title}}</text>
<div class="sub">
<text class="author theme-font">{{item.author}}</text>
<text class="line">|</text>
<text class="pubdate">{{item.pubdate}}</text>
</div>
</div>
<div class="content-box">
<rich-text :content="item.body"></rich-text>
</div>
<div class="border-b-5"></div>
<title-item v-if="aboutItems.length>0" title="相关阅读"></title-item>
<news-item v-if="aboutItems.length>0" :newsItems="aboutItems"></news-item>
<title-item title="推荐谱单" url="root:busi/topic/list.js?type=2"></title-item>
<top