uniapp——滚动消息、使用uniapp默认图标icon、搜索框滚动消息、view按钮不停放大缩小、3D按钮、边框动画旋转

最新推荐文章于 2024-09-13 11:52:16 发布
最新推荐文章于 2024-09-13 11:52:16 发布
阅读量5k 收藏 1
点赞数 1
分类专栏： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wy313622821/article/details/112217261
版权

1、滚动消息、使用uniapp默认图标icon

在这里插入图片描述

全部代码为：

<template>
	<view class="container">

		<view class="view_container1">
			<view class="tui-subject">
				<image class="icon-title" src="../../static/icon1.png"></image>
				<text style="font-weight: 600;">热门电台</text>
			</view>
			<view class="tui-rolling-news">
				<!-- 使用uniapp默认图标 -->
				<uni-icons color='#ff5500' type="sound-filled"></uni-icons>
				<swiper vertical autoplay circular interval="3000" class="tui-swiper">
					<swiper-item v-for="(item,index) in newsList" :key="index" class="tui-swiper-item">
						<view class="tui-news-item" @tap='detail'>{{item}}</view>
					</swiper-item>
				</swiper>
			</view>
		</view>

	</view>
</template>

<!-- :class="[false ? 'backgrounp-blue' : 'backgrounp-green']" -->
<script>
	export default {
		data() {
			return {
				newsList: [
					"致力发展负责任的人工智能 中国发布八大治理原则",
					"格兰仕暗示拜访拼多多后遭天猫打压，拼多多高层赞其有勇气",
					"阿里计划将每股普通股拆为8股，增加筹资灵活性"
				],
			}
		},
		onLoad() {},
		methods: {}
	}
</script>

<style>
	page {
		width: 100%;
		height: 100%;
	}

	.container {
		width: 100%;
		height: 100%;
	}

	.view_container1 {
		display: flex;
		flex-direction: column;
		background-color: #d3fffe;
		margin: 10upx;
		border-radius: 15upx;
		padding: 10upx;
	}

	.tui-subject {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.icon-title {
		width: 17upx;
		height: 30upx;
		margin-right: 10upx;
	}

	.tui-rolling-news {
		width: 100%;
		padding: 10rpx 0rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: nowrap;
	}

	

	.tui-swiper {
		font-size: 28rpx;
		height: 50rpx;
		flex: 1;
		margin-left: 10upx;
	}

	.tui-swiper-item {
		display: flex;
		align-items: center
	}

	.tui-news-item {
		line-height: 28rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>

使用默认图标步骤：

把uni-icons这个包导入到components里面
在这里插入图片描述
然后就可以在所需要使用的地方使用：

<uni-icons color='#ff5500' type="sound-filled"></uni-icons>

颜色和大小可以使用：:size=‘18’ color=’#999’ 来控制
uni-icons的下载地址为：
https://download.csdn.net/download/wy313622821/14026402

2、搜索框中的滚动消息

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

代码为：

<template>
	<view class="container">

		<!--搜索框-->
		<view class="tui-searchbox">
			<view class="tui-rolling-search">
				<uni-icons color='#999' type="search" size="18"></uni-icons>				
				<swiper vertical autoplay circular interval="3000" class="tui-swiper">
					<swiper-item v-for="(item,index) in newsList" :key="index" class="tui-swiper-item">
						<view class="tui-news-item" @tap='detail'>{{item}}</view>
					</swiper-item>
				</swiper>
			</view>
		</view>

	</view>
</template>

<!-- :class="[false ? 'backgrounp-blue' : 'backgrounp-green']" -->
<script>
	export default {
		data() {
			return {
				newsList: [
					"夏季穿搭",
					"减脂冬瓜荷叶蛋",
					"玻尿酸补水面膜"
				],
			}
		},
		onLoad() {},
		methods: {}
	}
</script>

<style>
	page {
		width: 100%;
		height: 100%;
	}

	.container {
		width: 100%;
		height: 100%;
		background-color: #f7f6e4;
	}

	.tui-searchbox {
		padding: 60rpx 80rpx;
		box-sizing: border-box;
	}

	.tui-rolling-search {
		width: 100%;
		height: 70rpx;
		border-radius: 35rpx;
		padding: 0 20rpx 0 20rpx;
		box-sizing: border-box;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: nowrap;
		color: #999;
		box-shadow: 0 0 20upx rgba(0, 0, 0, 0.15);
	}

	.tui-swiper {
		font-size: 28rpx;
		height: 50rpx;
		flex: 1;
		margin-left: 10upx;
	}

	.tui-swiper-item {
		display: flex;
		align-items: center
	}

	.tui-news-item {
		line-height: 28rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>

3、view按钮不停放大缩小

在这里插入图片描述

<button class="btn">点我</button>

/* 动态按钮 */
.btn {
  width: 50%;
  border-radius: 80rpx;
  animation: scaleDrew 1.5s ease-in-out infinite;
  background: linear-gradient(to right, #16aafe, #02d8eb);
  color: #fff;
  box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.3);
}

@keyframes scaleDrew {

  /* 定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称 */
  0% {
    transform: scale(1);
  }

  /* 25% {
    transform: scale(1.2);
  } */

  50% {
    transform: scale(1.2);
  }

  /* 75% {
    transform: scale(1.05);
  } */
}

3D按钮

在这里插入图片描述

<button class="button" hover-class="hover1">click</button>

.button {
  display: inline-block;
  /* padding: 15px 25px; */
  font-size: 20px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #4CAF50;
  border: none;
  border-radius: 20rpx;
  /* box-shadow: 5rpx 9px #999; */
  box-shadow: 0 20rpx 5rpx #999;
}

.hover1 {
  box-shadow: 0 5rpx 5rpx #666;
  /* box-shadow: 0rpx 20rpx 9px #999; */
  transform: translateY(4px);
}

4、边框动画旋转

第一种动画效果：
在这里插入图片描述
wxml代码：

<view class="wrap">
  <!-- 渐变显示区域 -->
  <view class="bgc"></view>
  <!-- 内容 -->
  <view class="content">123</view>
</view>

wxss代码：

/* 最外层的作用是让中间的.bgc溢出部分隐藏 
大小根据内容区域与边框大小自由调整 */
.wrap {
  width: 300rpx;
  height: 300rpx;
  overflow: hidden;
  position: relative;
  border-radius: 20rpx;
  /* 弹性盒子使content区域居中显示 */
  display: flex;
  align-items: center;
  justify-content: center; 
  margin: 50rpx;
}
/* 最终动态渐变边框实际内容 比.wrap大 但是因为溢出部分被隐藏 
而中间部分又因为层级关系被.content盖住 
最后只有.wrap和.content之间的缝隙显示这个旋转的渐变色背景 */
.bgc {
  
  width: 500rpx;
  height: 500rpx;
  background: linear-gradient(rgb(6, 245, 185),rgb(8, 117, 241));
  animation: bgc 2.5s infinite linear;
  border-radius: 50%;
  position: absolute; 
  z-index: -1;
}
/* 内容区域 根据自身情况调整大小 */
.content {
  width: 250rpx;
  height: 250rpx;
  background-color: #fff;
  border-radius: 20rpx;
}
/* 渐变色背景旋转动画 */
@keyframes bgc {
  0% {
      transform: rotateZ(0);
  }

  100% {
      transform: rotateZ(360deg);
  }
}

第二种动画效果：
在这里插入图片描述
wxml代码：

<view class="box-line"></view>

wxss代码：

.box-line, .box-line::before, .box-line::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.box-line {
  width: 200px;
  height: 200px;
  margin: auto;
  background: url("img/Button-White-Large.png") no-repeat 50%/70% rgba(0, 0, 0, 0.1);
  color: #69ca62;
  box-shadow: inset 0 0 0 1px rgba(105, 202, 98, 0.5);
}
.box-line::before, .box-line::after {
  content: '';
  z-index: -1;
  margin: -5%;
  box-shadow: inset 0 0 0 2px;
  animation: clipMe 8s linear infinite;
}
.box-line::before {
  animation-delay: -4s;
}
.box-line:hover::after, .box-line:hover::before {
  background-color: rgba(255, 0, 0, 0.3);
}

@keyframes clipMe {
  0%, 100% {
      clip: rect(0px, 220.0px, 2px, 0px);
  }
  25% {
      clip: rect(0px, 2px, 220.0px, 0px);
  }
  50% {
      clip: rect(218.0px, 220.0px, 220.0px, 0px);
  }
  75% {
      clip: rect(0px, 220.0px, 220.0px, 218.0px);
  }
}
wy313622821
关注
专栏目录
Android 自定义搜索框（带搜索图标、清除图标、语音图标）
u014714188的博客
11-29 3175
相信大家都用过android自带的SearchView，至于疗效如何相信用过的人都知道。既然自带的搜索框疗效不足，那我们就来自己定义。本篇文章是在EditText上给大家自定义搜索框，并且带了搜索图标，清除图标，语音图标。 按照国际惯例，先给大家上最后的效果图： 输入值后： 接下来我们来看看到底是如何自定义EditTextSearch的： public class EditTextSearch...
小程序页面设计笔记1（搜索框、图片大小、并排排放、图片按钮）
weixin_51983891的博客
12-02 1005
关于小页面制作过程中的一些问题记录，包括搜索框的制作，图片按钮的制作等。
uniapp常用图标.zip
01-15
图标 图标
uniapp聊天页面之消息滚动
宝子的博客
03-07 1630
刚进入页面的时候，有可能会没有滚动效果，这可能是因为消息列表的DOM节点还没有渲染到页面上，滚动的方法变已经执行了，导致滚动效果消失。所以调用的时候最好放在nextTick中。-view的高度减去所有聊天内容的高度，得到的就是滚动条需要下拉的距离，即可使聊天页下拉至最底部。-view一个固定的高度，并获取消息信息的高度。
uni-app 聊天界面滚动到消息底部
最新发布
weixin_72254790的博客
09-13 1385
那么思路已经很清晰了，使用uni.pageScrollTo 让滚动到目标位置（scrollTop）设置为页面的高度不就可以了？uni.createSelectorQuery()锁定scroll-view的id，使用NodesRef对象返回的只有height信息。
uniapp默认导航栏自定义图标按钮
xiawenyi的博客
08-28 1356
实现uniapp默认导航栏设置自定义icon图标按钮。
uni-app---icon使用
weixin_43531654的博客
11-16 634
一、导航栏icon使用 1、下载到本地 2、解压后
替换uni-app中H5的默认图标
偷懒的加菲
01-26 3040
https://www.cnblogs.com/wbl001/p/12330792.html https://www.cnblogs.com/niceyoo/p/12215860.html
uniapp可滚动视图区域
qq_40889256的博客
09-07 2147
<template> <view> <scroll-view :scroll-top="scrollTop" scroll-y="true" @scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll" class="scroll-y" scroll-with-animation="true"> <view class="scroll-y" style="
uniapp详情页滚动显示标题
qq_45193707的博客
08-10 498
uniapp详情页滚动显示标题 “titleNView”: { “type”: “transparent” } "pages": [{ "path": "pages/news/index", "style": {} }, { "path": "pages/news/detail", "style": { "app-plus": { "titleNView": { "type": "tr
uniapp 仿微信的右边下拉选择弹出框的实现代码
10-15
样式包括搜索框和下拉菜单的布局、颜色、阴影、边框等。注意，为了保持代码简洁，只展示了与下拉菜单相关的样式部分。 总结来说，这个uniapp组件实现了微信风格的右侧下拉选择菜单，包括一个可输入的搜索框和一个可...
微信小程序-优雅的搜索框
06-12
此外，为了让搜索框具有清除功能，我们可以添加一个清除按钮，利用`icon`组件实现。点击清除按钮时，重置输入框和过滤列表： ```html <view class="search-clear"> <button icon="clear" bindtap="handleClear" ...
uni-app的图标插件
01-14
导入到其它项目中使用方法 1. 将components/fa-icons/fa-icons.vue文件(夹)复制到自己的项目下 2.在main.js中全局引入 // 图表组件 import faicon from './components/fa-icon/fa-icon.vue' Vue.component('faicon',faicon) 3.页面中引用 在需要插入的页面引用 <!-- type 为图标名称 color 为图标颜色 默认#000000 (黑色，可不填) size 为图标大小 默认14px/1 (可不填) --> 或者class直接引用 <!-- 注意格式否则无法正常显示 class="fa fa-*" *号为名称 -->
《uni-app》表单组件-Button按钮
热门推荐
Oliver尹的博客
08-28 1万+
本文主要分享了uni-app中内置组件button的一些用法，包括属性的使用，事件机制以及通过代码的比对详细解释了开放能力
【uni-app】uni-app官方自带图标的使用方法
【敦厚的曹操】的专栏
04-27 3091
【代码】【uni-app】uni-app官方自带图标的使用方法。
uni-app uView 滚动公告
weixin_71344385的博客
06-19 1201
uni-app uView 滚动公告
uni-app图标库
Sun_Maple_jw的博客
09-07 9400
首先需要使用HBuilder X安装导入插件 官方文档路径：https://ext.dcloud.net.cn/plugin?id=28 <template> <view> <uni-icons type="cloud-upload"/> <uni-icons type="cloud-upload" color="#007aff" /> <uni-icons type="cloud-upload" color="#...
uniapp操作界面滚动
weixin_49295874的博客
12-03 2498
<scroll-view scroll-y="true" class="scroll-Y box" :style="{ 'height': getWindowHeight + 'px' }" ></scroll-view> computed: { getWindowHeight() { let height=''; uni.getSystemInfo({ success: function(res) { height = res.wind
uniapp-【icon】
if.else.Z
03-23 362
属性名 类型 默认值 说明 type String icon的类型 size Number 23 icon的大小，单位px color Color icon的颜色，同css的color <view class="item" v-for="(value,index) in iconType" :key="index"> <icon :type="value" size="26"/&...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

wy313622821

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值