【热梗案例】知识点阶段性综合汇总

于 2024-07-10 13:38:37 发布
阅读量468 收藏 5
点赞数 3
文章标签： uniapp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_80735340/article/details/140315725
版权

文章目录

直接用CSS的模板，模板代码如下：

<template>
	<view class="title">
	    近期热梗
	</view>
	
	<view class="out">	  
	  <view class="list">
	    <view class="row" v-for="(item,index) in 3" :key="index">
	      <view class="text">{{index+1}}. 标题文字演示</view>
	      <view class="close">
	        <icon type="clear" size="26"/>
	      </view>
	    </view>
	  </view>	
	  <view class="count">
	    共3条梗
	  </view>	
	  <view class="comment">
	    <input type="text" 
	    placeholder="请输入热梗..."
	       
	    />    
	    <button size="mini" type="primary" disabled    
	    >发布</button>
	  </view>
	</view>
</template>

<script setup>
import {ref} from "vue";
const lists = ref([
	{id:111,title:"刚满18岁"},
	{id:222,title:"我不吃牛肉"},
	{id:333,title:"遥遥领先"},
	{id:444,title:"哪里贵了"}
])
</script>

<style lang="scss" scoped>
.title{
  font-size: 26px;
  text-align: center;
  color:#3c3c3c;
  padding:30px 0 15px;
}
.out{
  width: 90vw;
  margin:15px auto;
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
  border-radius: 5px;
  padding:15px;
  box-sizing: border-box;
  .list{
	  .row{
		  padding:10px 0;
		  border-bottom:1px solid #e8e8e8;
		  display: flex;
		  justify-content: space-between;
		  align-items: center;
		  font-size: 18px;
		  color:#333;
		  .text{
			  padding-right: 5px;
			  box-sizing: border-box;
		  }
	  }
  }
  .count{
    padding:10px 0;
    font-size: 15px;
    color:#888;
    text-align:center;
  }
  .comment{
    display: flex;
    margin-top:10px;
	input{
	  flex:4;
	  background: #f4f4f4;
	  margin-right: 5px;
	  height: 100%; 
	  height: 32px;
	  border-radius: 4px;
	  padding:0 10px;
	  color:#333;
	}
	button{
	  flex:1;	  
	}
  }  
}

</style>

这是整体页面效果：
在这里插入图片描述
我们要实现这样一些功能：

  1. 让列表下的“共3条梗”实现统计功能。
  2. 点击每条热梗后的叉，能够实现删除功能。
  3. 实现发布按钮的功能。
  4. 能够发布热梗，发布后的热梗直接追加在列表后。

渲染对象、实现统计功能

模板中的script中定义了对象，先把对象渲染出来，然后让梗实现统计功能，让它等于数组lists的长度，代码如下：

<template>
	<view class="title">
	    近期热梗
	</view>
	
	<view class="out">	  
	  <view class="list">
	    <view class="row" v-for="(item,index) in lists" :key="index">
	      <view class="text">{{index+1}}. {{item.title}}</view>
	      <view class="close">
	        <icon type="clear" size="26"/>
	      </view>
	    </view>
	  </view>	
	  <view class="count">
	    共{{lists.length}}条梗
	  </view>	
	  <view class="comment">
	    <input type="text" 
	    placeholder="请输入热梗..."
	       
	    />    
	    <button size="mini" type="primary" disabled    
	    >发布</button>
	  </view>
	</view>
</template>

<script setup>
import {ref} from "vue";
const lists = ref([
	{id:111,title:"刚满18岁"},
	{id:222,title:"我不吃牛肉"},
	{id:333,title:"遥遥领先"},
	{id:444,title:"哪里贵了"}
])
</script>

<style lang="scss" scoped>
.title{
  font-size: 26px;
  text-align: center;
  color:#3c3c3c;
  padding:30px 0 15px;
}
.out{
  width: 90vw;
  margin:15px auto;
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
  border-radius: 5px;
  padding:15px;
  box-sizing: border-box;
  .list{
	  .row{
		  padding:10px 0;
		  border-bottom:1px solid #e8e8e8;
		  display: flex;
		  justify-content: space-between;
		  align-items: center;
		  font-size: 18px;
		  color:#333;
		  .text{
			  padding-right: 5px;
			  box-sizing: border-box;
		  }
	  }
  }
  .count{
    padding:10px 0;
    font-size: 15px;
    color:#888;
    text-align:center;
  }
  .comment{
    display: flex;
    margin-top:10px;
	input{
	  flex:4;
	  background: #f4f4f4;
	  margin-right: 5px;
	  height: 100%; 
	  height: 32px;
	  border-radius: 4px;
	  padding:0 10px;
	  color:#333;
	}
	button{
	  flex:1;	  
	}
  }  
}

</style>

看看效果：
在这里插入图片描述

实现删除功能

删除功能的实现，先为其加上click事件onClose，然后在script中写入函数，代码如下：

<template>
	<view class="title">
	    近期热梗
	</view>
	
	<view class="out">	  
	  <view class="list">
	    <view class="row" v-for="(item,index) in lists" :key="item.id">
	      <view class="text">{{index+1}}. {{item.title}}</view>
	      <view class="close" @click="onClose(index)">
	        <icon type="clear" size="26"/>
	      </view>
	    </view>
	  </view>	
	  <view class="count">
	    共{{lists.length}}条梗
	  </view>	
	  <view class="comment">
	    <input type="text" 
	    placeholder="请输入热梗..."
	       
	    />    
	    <button size="mini" type="primary" disabled    
	    >发布</button>
	  </view>
	</view>
</template>

<script setup>
import {ref} from "vue";
const lists = ref([
	{id:111,title:"刚满18岁"},
	{id:222,title:"我不吃牛肉"},
	{id:333,title:"遥遥领先"},
	{id:444,title:"哪里贵了"}
])
function onClose(index){
	lists.value.splice(index,1) ;
}
</script>

<style lang="scss" scoped>
.title{
  font-size: 26px;
  text-align: center;
  color:#3c3c3c;
  padding:30px 0 15px;
}
.out{
  width: 90vw;
  margin:15px auto;
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
  border-radius: 5px;
  padding:15px;
  box-sizing: border-box;
  .list{
	  .row{
		  padding:10px 0;
		  border-bottom:1px solid #e8e8e8;
		  display: flex;
		  justify-content: space-between;
		  align-items: center;
		  font-size: 18px;
		  color:#333;
		  .text{
			  padding-right: 5px;
			  box-sizing: border-box;
		  }
	  }
  }
  .count{
    padding:10px 0;
    font-size: 15px;
    color:#888;
    text-align:center;
  }
  .comment{
    display: flex;
    margin-top:10px;
	input{
	  flex:4;
	  background: #f4f4f4;
	  margin-right: 5px;
	  height: 100%; 
	  height: 32px;
	  border-radius: 4px;
	  padding:0 10px;
	  color:#333;
	}
	button{
	  flex:1;	  
	}
  }  
}

</style>

效果如下：
在这里插入图片描述

设置发布按钮

发布按钮默认是关闭的，现在进行设置，只要输入框中有内容，发布按钮就开启。这里，我们通过输入框中的v-model绑定获取数据，然后设定没有数据，发布按钮保持disable状态，代码如下：

<template>
	<view class="title">
	    近期热梗
	</view>
	
	<view class="out">	  
	  <view class="list">
	    <view class="row" v-for="(item,index) in lists" :key="item.id">
	      <view class="text">{{index+1}}. {{item.title}}</view>
	      <view class="close" @click="onClose(index)">
	        <icon type="clear" size="26"/>
	      </view>
	    </view>
	  </view>	
	  <view class="count">
	    共{{lists.length}}条梗
	  </view>	
	  <view class="comment">
	    <input type="text" 
	    placeholder="请输入热梗..."
	     v-model="iptvalue"  
	    />    
	    <button size="mini" type="primary" :disabled = "!iptvalue.length"    
	    >发布</button>
	  </view>
	</view>
</template>

<script setup>
import {ref} from "vue";
const lists = ref([
	{id:111,title:"刚满18岁"},
	{id:222,title:"我不吃牛肉"},
	{id:333,title:"遥遥领先"},
	{id:444,title:"哪里贵了"}
])
const iptvalue = ref("") ; 
function onClose(index){
	lists.value.splice(index,1) ;
}
</script>

<style lang="scss" scoped>
.title{
  font-size: 26px;
  text-align: center;
  color:#3c3c3c;
  padding:30px 0 15px;
}
.out{
  width: 90vw;
  margin:15px auto;
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
  border-radius: 5px;
  padding:15px;
  box-sizing: border-box;
  .list{
	  .row{
		  padding:10px 0;
		  border-bottom:1px solid #e8e8e8;
		  display: flex;
		  justify-content: space-between;
		  align-items: center;
		  font-size: 18px;
		  color:#333;
		  .text{
			  padding-right: 5px;
			  box-sizing: border-box;
		  }
	  }
  }
  .count{
    padding:10px 0;
    font-size: 15px;
    color:#888;
    text-align:center;
  }
  .comment{
    display: flex;
    margin-top:10px;
	input{
	  flex:4;
	  background: #f4f4f4;
	  margin-right: 5px;
	  height: 100%; 
	  height: 32px;
	  border-radius: 4px;
	  padding:0 10px;
	  color:#333;
	}
	button{
	  flex:1;	  
	}
  }  
}

</style>

实现发布按钮的提交功能

接下来，设置点击发布，首先，设定事件onSubmit，然后写入onSubmit函数，这里再加上两个功能，一个是提交后清除输入框内的内容，一个是用confirm事件使敲击回车键具有和点击发布一样的功能，代码如下：

<template>
	<view class="title">
	    近期热梗
	</view>
	
	<view class="out">	  
	  <view class="list">
	    <view class="row" v-for="(item,index) in lists" :key="item.id">
	      <view class="text">{{index+1}}. {{item.title}}</view>
	      <view class="close" @click="onClose(index)">
	        <icon type="clear" size="26"/>
	      </view>
	    </view>
	  </view>	
	  <view class="count">
	    共{{lists.length}}条梗
	  </view>	
	  <view class="comment">
	    <input type="text" 
	    placeholder="请输入热梗..."
	     v-model="iptvalue"  
		 @confirm="onSubmit"
	    />    
	    <button size="mini" type="primary" :disabled = "!iptvalue.length"    
	    @click="onSubmit"
		>发布</button>
	  </view>
	</view>
</template>

<script setup>
import {ref} from "vue";
const lists = ref([
	{id:111,title:"刚满18岁"},
	{id:222,title:"我不吃牛肉"},
	{id:333,title:"遥遥领先"},
	{id:444,title:"哪里贵了"}
])
const iptvalue = ref("") ;  //v-model绑定，输入框有内容同时会同步到iptvalue
function onClose(index){
	lists.value.splice(index,1) ;
}
function onSubmit(){
	lists.value.push({id:Date.now(),title:iptvalue.value}) ;
	iptvalue.value = "" ;
}
</script>

<style lang="scss" scoped>
.title{
  font-size: 26px;
  text-align: center;
  color:#3c3c3c;
  padding:30px 0 15px;
}
.out{
  width: 90vw;
  margin:15px auto;
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
  border-radius: 5px;
  padding:15px;
  box-sizing: border-box;
  .list{
	  .row{
		  padding:10px 0;
		  border-bottom:1px solid #e8e8e8;
		  display: flex;
		  justify-content: space-between;
		  align-items: center;
		  font-size: 18px;
		  color:#333;
		  .text{
			  padding-right: 5px;
			  box-sizing: border-box;
		  }
	  }
  }
  .count{
    padding:10px 0;
    font-size: 15px;
    color:#888;
    text-align:center;
  }
  .comment{
    display: flex;
    margin-top:10px;
	input{
	  flex:4;
	  background: #f4f4f4;
	  margin-right: 5px;
	  height: 100%; 
	  height: 32px;
	  border-radius: 4px;
	  padding:0 10px;
	  color:#333;
	}
	button{
	  flex:1;	  
	}
  }  
}

</style>

效果如下：
在这里插入图片描述

2301_80735340
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值