uni-app css scoped
时间: 2023-12-24 19:05:12 浏览: 31
Uni-app中的CSS Scoped是一种保护CSS样式不被全局污染的机制,可以确保组件中的样式只作用于当前组件,而不会影响到其他组件。在编写组件时,只需要在style标签上添加scoped属性即可开启CSS Scoped。例如:
```
<template>
<view class="container">
<text class="text">Hello World</text>
</view>
</template>
<style scoped>
.container {
width: 100%;
height: 100%;
}
.text {
font-size: 16px;
color: #333;
}
</style>
```
在上面的例子中,由于使用了scoped属性,.container和.text样式只作用于当前组件中,不会影响到其他组件。
相关问题
uni-app修改uni.showModal样式
在UniApp中,如果你想修改`uni.showModal`组件的样式, UniApp 使用了 Vue.js 的单文件组件(.vue)来开发,并且提供了自定义主题和样式的能力。`uni.showModal`是一个原生API,但它允许你在组件内部通过`style`或` scoped slot`来覆盖默认样式。
1. **直接在组件内部**:你可以为`modal`元素添加一个`v-bind:class`属性,并根据需要动态绑定类名,然后在`.vue`文件的`<style>`标签或 scoped `style`块中定义对应的CSS规则。例如:
```html
<template>
<view v-bind:class="{ customModal: isCustom }">
<!-- modal内容 -->
<uni-modal @onShow="showModal" @onHide="hideModal">
<view class="custom-modal-wrap">
<!-- 你的模态内容 -->
</view>
</uni-modal>
</view>
</template>
<script>
export default {
data() {
return {
isCustom: false, // 根据需求控制是否使用自定义样式
};
},
methods: {
showModal() {
this.isCustom = true;
},
hideModal() {
this.isCustom = false; // 隐藏后恢复默认样式
},
},
styles: {
.customModal: {
/* 在这里编写你的自定义modal样式 */
background-color: '#f00'; // 例如改变背景颜色
width: '80%', // 可以调整宽度
padding: '20px', // 自定义内边距
},
.custom-modal-wrap {
/* 可能需要的子元素样式 */
},
},
};
</script>
```
2. **全局样式表**:如果你希望在整个应用中重用这些修改,可以在`app.vue`或`main.css`中添加全局样式。但请注意,这样可能会影响到所有使用`uni.showModal`的地方。
记得在隐藏`uni.showModal`后,将`isCustom`设置回`false`,以便切换回默认样式,防止样式混乱。
uni-app实现点赞功能
1. 在pages文件夹下新建一个文件夹,取名为comment(可以自己随便取名),然后新建一个页面,取名为comment。
2. 在comment.vue中添加如下代码:
```
<template>
<view class="container">
<view class="item">
<view class="avatar"></view>
<view class="content">
<view class="username">小明</view>
<view class="message">这是一条评论</view>
</view>
<view class="like" @click="addLike">
<text :class="{'iconfont':true,'icon-dianzan1':!isLiked,'icon-dianzan-copy':isLiked}"></text>
<text class="num">{{ likeNum }}</text>
</view>
</view>
<view class="item">
<view class="avatar"></view>
<view class="content">
<view class="username">小红</view>
<view class="message">这是一条评论</view>
</view>
<view class="like" @click="addLike">
<text :class="{'iconfont':true,'icon-dianzan1':!isLiked,'icon-dianzan-copy':isLiked}"></text>
<text class="num">{{ likeNum }}</text>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
likeNum: 5,
isLiked: false,
};
},
methods: {
addLike() {
if (!this.isLiked) {
this.likeNum++;
this.isLiked = true;
} else {
this.likeNum--;
this.isLiked = false;
}
},
},
};
</script>
<style scoped>
.container {
background-color: #f5f5f5;
padding: 20rpx;
}
.item {
display: flex;
align-items: center;
justify-content: space-between;
background-color: #fff;
margin-bottom: 20rpx;
padding: 20rpx;
border-radius: 10rpx;
}
.avatar {
width: 60rpx;
height: 60rpx;
background-color: #ddd;
border-radius: 50%;
}
.content {
flex: 1;
margin-left: 10rpx;
}
.username {
font-size: 30rpx;
font-weight: bold;
margin-bottom: 10rpx;
}
.message {
font-size: 28rpx;
}
.like {
display: flex;
align-items: center;
font-size: 32rpx;
color: #666;
}
.like .num {
margin-left: 10rpx;
}
.iconfont {
font-family: 'iconfont' !important;
}
</style>
```
3. 在static文件夹下新建一个iconfont文件夹,并将下载好的阿里图标库中的iconfont文件夹下的iconfont.ttf文件拷贝到static/iconfont文件夹下。
4. 在App.vue中引入阿里图标库的iconfont.css和uni.css:
```
<style>
@import url('~@/static/iconfont/iconfont.css');
@import url('~@/static/uni.css');
</style>
```
5. 在pages.json中添加如下代码:
```
{
"path": "pages/comment/comment",
"style": {
"navigationBarTitleText": "评论",
"navigationBarBackgroundColor": "#fff",
"navigationBarTextStyle": "black"
}
}
```
6. 运行项目即可看到点赞功能实现。
代码解析:
(1)在data中定义likeNum和isLiked,likeNum表示点赞数,isLiked表示当前用户是否已经点赞。初始化时将likeNum设为5(也可以根据需求自行修改),isLiked设为false。
(2)在addLike方法中根据isLiked判断当前用户是否已经点赞,如果没有点赞,点赞数加1,isLiked设为true;如果已经点赞,点赞数减1,isLiked设为false。
(3)在模板中使用:class动态绑定class,根据isLiked的值来给text标签绑定不同的iconfont类,实现点赞和取消点赞的效果。
(4)样式方面,使用了Flex布局,使布局更加美观简洁。添加了圆角、背景色等样式来优化界面。