写一个添加新闻的按钮
<template>
<view class="home">
<view class="content">
<view class="item" v-for="item in 5">
<view class="text">
<view class="title">默认标题默认标题默认标题默认标题默认标题默认标题默认标题默认标题默认标题</view>
<view class="info">
<text>小明</text>
<text>2022-10-10</text>
<text>删除</text>
</view>
</view>
<view class="pic">
<image src="../../static/images/nopic.jpg" mode="aspectFill"></image>
</view>
</view>
</view>
<view class="goEdit">+</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
onLoad() {
},
methods: {
}
}
</script>
<!-- 在Vue文件中的style标签上有一个特殊的属性，scoped。当一个style标签拥有scoped属性时候，它的css样式只能用于当前的Vue组件，可以使组件的样式不相互污染。如果一个项目的所有style标签都加上了scoped属性，相当于实现了样式的模块化。 -->
<style lang="scss" scoped>
.home {
.content {
padding: 30rpx;
.item {
// 弹性布局,使文字和图片在一行显示
display: flex;
// 两端对齐
justify-content: space-between;
padding: 20rpx 0;
border-bottom: 1rpx solid #eee;
.text {
flex:1;
// 下面这三行是为了给标题和作者添加边距
// 给文字加弹性盒模型，会使标题和作者时间显示在一行
display: flex;
// 使标题和作者纵向排列
flex-direction: column;
// 标题和作者上下两端对齐
justify-content: space-between;
// 使文字和图片有20的间隔
padding-right: 20rpx;
.title {
font-size: 44rpx;
color: #333;
// 使文字对齐,没看出效果来,不知道什么用
text-align: justify;
// 下面是标题超出两行省略号显示
text-overflow: -o-ellipsis-lastline;
overflow: hidden; //溢出内容隐藏
text-overflow: ellipsis; //文本溢出部分用省略号表示
display: -webkit-box; //特别显示模式
-webkit-line-clamp: 2; //行数
line-clamp: 2;
-webkit-box-orient: vertical; //盒子中内容竖直排列
}
.info {
font-size: 28rpx;
color:#888;
// 给作者、时间部分文字间隔
text {
padding-right: 20rpx;
}
}
}
.pic {
width: 260rpx;
height: 180rpx;
image{
width: 100%;
height: 100%;
}
}
}
}
// 给按钮写样式
.goEdit {
width: 120rpx;
height: 120rpx;
background: #2B9939;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
font-size: 50rpx;
// 盒子固定定位到右下角
position: fixed;
right: 60rpx;
bottom: 100rpx;
// 按钮阴影
box-shadow: 0 0 20rpx rgba(43, 153, 157, 0.6);
}
}
</style>
###写一个方法跳转到新增新闻页面
<template>
<view class="home">
<view class="content">
<view class="item" v-for="item in 5">
<view class="text">
<view class="title">默认标题默认标题默认标题默认标题默认标题默认标题默认标题默认标题默认标题</view>
<view class="info">
<text>小明</text>
<text>2022-10-10</text>
<text>删除</text>
</view>
</view>
<view class="pic">
<image src="../../static/images/nopic.jpg" mode="aspectFill"></image>
</view>
</view>
</view>
<!-- 跳转到新增页面 -->
<view class="goAdd" @click="goAdd">+</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
onLoad() {
},
methods: {
// 点击按钮跳转到新增页面
goAdd(){
uni.navigateTo({
url:"/pages/add/add"
})
}
}
}
</script>
点击按钮，跳转到新增页面
新增页面
<template>
<view class="add">
<view class="item">
<!-- 标题输入框 -->
<input type="text" name="title" placeholder="请输入标题"></input>
</view>
<view class="item">
<!-- 作者输入框 -->
<input type="text" name="author" placeholder="请输入作者"></input>
</view>
<view class="item">
<!-- 多行输入框 -->
<textarea name="content" placeholder="请输入内容"></textarea>
</view>
<view class="item">
<button>提交</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
};
}
}
</script>
<style lang="scss" scoped>
.add {
padding: 30rpx;
.item {
padding-bottom: 20rpx;
input, textarea {
border: 1rpx solid #eee;
height: 80rpx;
padding: 0 20rpx;
}
textarea {
height: 200rpx;
// 文本域有原生的宽度,所以设置这个属性
width: 100%;
// 这里有一个问题,原本在app.vue里是设置了怪异盒模型的
// 使添加的边距向父盒子内压缩
// 但是这里没有起效果,使得给文本域加了宽度为100%后
// 文本域的右边就顶到屏幕右边了
// 所以给他加一个标准盒模型,使父盒子的外边距再把它顶回来
// 但是只是右边顶到了屏幕上,左边没有,就不知道什么情况
box-sizing: border-box;
}
}
}
</style>
如果把app.vue里写的
:root {
/* 怪异盒子模型 使边距向内增加，父盒子尺寸不会改变*/
box-sizing: border-box;
}
改成
* {
/* 怪异盒子模型 使边距向内增加，父盒子尺寸不会改变*/
box-sizing: border-box;
}
这里在添加页面add.vue就不用再设置一次怪异盒模型box-sizing: border-box;了
