详情布局
标题下面有作者和发布时间，再下面是正文部分
使用点击事件进行跳转，如果是加在自定义组件标签上系统原生事件，要加.native，否则不生效，系统会认为这是开发者自定义的
<view class="content">
<view class="row" v-for="item in newsList">
<newsStyle @click.native="demo"></newsStyle>
</view>
</view>
methods: {
// 点击导航栏切换选中项
clickNav(index){
this.navIndex = index
},
demo(){
console.log("demo");
}
}
点击组件，点击事件方法在控制台打印了demo字符串，证明点击事件可用，不加.native是不可用的，因为这是在自定义组件上加
页面跳转因为点击事件是写在自定义组件标签上的，而首页和个人页面都有新闻内容的展示，所以两个页面都要在自定义的组件标签写一遍点击事件和跳转方法，如果点击事件和跳转方法直接写在组件内部，就不用写两遍了
<template>
<view class="home">
<scroll-view scroll-x class="navScroll">
<view class="item" :class="index==navIndex?'active':''" v-for="(item, index) in arr" @click="clickNav(index)">国内</view>
</scroll-view>
<view class="content">
<view class="row" v-for="item in newsList">
<newsStyle @click.native="goDetail"></newsStyle>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
arr: 10,
newsList: 10,
navIndex:0
}
},
onLoad() {
},
methods: {
// 点击导航栏切换选中项
clickNav(index){
this.navIndex = index
},
// 跳转到详情页
goDetail(){
uni.navigateTo({
url:"/pages/detail/detail"
})
}
}
}
</script>
现在，点击首页和个人页面的组件都能跳转到详情页了，接下来就是写详情页的布局了
<template>
<view class="detail">
<view class="title">文章标题文章标题文章标题文章标题文章标题文章标题文章标题文章标题</view>
<view class="info">
<view class="author">编辑： 张三</view>
<view class="time">2022-12-12 15:30:00</view>
</view>
<view class="content">
内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分内容部分
</view>
<view class="description">
声明：本站的内容均采集自腾讯新闻，如果侵权请联系xxx进行整改删除，本站进行了内容采集不代表本站及作者观点，若有侵权请及时联系管理员，谢谢支持
</view>
</view>
</template>
<script>
export default {
data() {
return {
};
}
}
</script>
<style lang="scss">
.detail {
padding: 30rpx;
.title {
font-size: 46rpx;
color: #333;
}
.info {
background: #f6f6f6;
padding: 20rpx 20rpx;
font-size: 25rpx;
color: #666;
// 加盒模型,使作者和时间部分左右对齐
display: flex;
justify-content: space-between;
margin: 40rpx 0;
}
// 内容部分
.content {
padding-bottom: 50rpx;
}
// 声明部分
.description {
background: #fef0f0;
font-size: 26rpx;
padding: 20rpx;
color: #f89898;
line-height: 1.8em;
}
}
</style>
基础样式
