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);
}
}
8364
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
