xianglijiaxing
1.预设值class 动态化
已经编写好的样式，动态使用
布局模版
<view class="pop-wrapper" v-if="showBottomPop" type="bottom" @click="preventClick()">
<view class="wrapper">
<view class="header">请选择交易类型</view>
<view style="background-color: rgba(192,196,204,0.33); height: 0.5px"></view>
<view class="bottom-sheet">
<view :class="{'text-wrapper': tabId == 5, 'text-wrapper-unselect': tabId != 5}" @click.stop.prevent="clickBottomSheetBtn(5)">
全部</view>
<view :class="{'text-wrapper': tabId == 2, 'text-wrapper-unselect': tabId != 2}" @click.stop.prevent="clickBottomSheetBtn(2)">
送出礼物</view>
<view :class="{'text-wrapper': tabId == 3, 'text-wrapper-unselect': tabId != 3}" @click.stop.prevent="clickBottomSheetBtn(3)">
获得礼物</view>
<view :class="{'text-wrapper': tabId == 4, 'text-wrapper-unselect': tabId != 4}" @click.stop.prevent="clickBottomSheetBtn(4)">
已使用</view>
</view>
<view style="background-color: rgba(192,196,204,0.33); height: 0.5px"></view>
<view class="header" @click.stop.prevent="hideBottomSheet"> 取消</view>
</view>
</view>
class 之后添加:boolean ， 表示是启用此class;
样式定义
.text-wrapper{
flex: 1;
grid-row: 1;
background-color: #57BF6A;
margin: 8upx 20upx;
border-width: 2upx;
border-radius: 6upx;
border-color: #57BF6A;
border-style:solid;
/*flex-grow: 1;*/
font-size: 26upx;
color: #FFFFFF;
text-align: center;
padding: 24upx 20upx;
}
.text-wrapper-unselect{
flex: 1;
grid-row: 1;
background-color: #FFFFFF;
margin: 8upx 10upx;
border-width: 2upx;
border-radius: 6upx;
border-color: #FFFFFF;
border-style:solid;
/*flex-grow: 1;*/
font-size: 26upx;
color: #333;
text-align: center;
padding: 24upx 20upx;
}
2.计算属性与class 结合
示例一：
<view :class=classes @click.stop.prevent="clickBottomSheetBtn(5)">
computed:{
classes(){
return [ // 'text-wrapper', 'text-wrapper-unselect'
{'text-wrapper': this.tabId == 5,
'text-wrapper-unselect': this.tabId != 5,
}
]
},
}
示例二：
computed:{
topImgHeight: function (){
let upx = 750 * 0.8 * 174 / 434;
let px = uni.upx2px(upx);
// return uni.upx2px(750 * 0.8 * 174 / 434);
// console.log('upx:' + String(upx), 'px:' + String(px));
return String(px) + 'px';
}
}
.global-tab_top_img{
width: 100%;
height: var(--height);
/*height: 200upx; // 这里需要动态计算*/
}
<image :style="{'--height': topImgHeight}" class="global-tab_top_img" src="/static/img/icon/global_tab_bg.png"></image>示例三：
iview button-group 源码()模版字符串：
<template>
<div :class="classes">
<slot></slot>
</div>
</template>
<script>
import { oneOf } from '../../utils/assist';
const prefixCls = 'ivu-btn-group';
export default {
name: 'ButtonGroup',
props: {
size: {
validator (value) {
return oneOf(value, ['small', 'large', 'default']);
}
},
shape: {
validator (value) {
return oneOf(value, ['circle', 'circle-outline']);
}
},
vertical: {
type: Boolean,
default: false
}
},
computed: {
classes () {
return [
`${prefixCls}`,
{
[`${prefixCls}-${this.size}`]: !!this.size,
[`${prefixCls}-${this.shape}`]: !!this.shape,
[`${prefixCls}-vertical`]: this.vertical
}
];
}
}
};
</script>
3.CSS 变量
示例一：
修改已经存在的样式中的某个属性
模版
<view class="gift_detail_introduce">
<view :style="{'--color': daynamicColor}" class="test-class">商品信息</view>
<view>状态</view>
</view>
样式定义
less 语法：
<style lang="less">
.test-class{
color: var(--color);
}
</style>
Sass 语法示例：
<style scoped lang="sass">
// 只在使用 CSS 变量的时候和前面略有不同
.span2
width: #{'var(--width)'}
</style>这里的#{'var(--width)'}是 Sass 里的插值，类似于 js 里的`${}`。
Stylus 语法
示例：
vendor(prop, args)
-webkit-{prop} args
-moz-{prop} args
{prop} args
border-radius()
vendor('border-radius', arguments)
box-shadow()
vendor('box-shadow', arguments)
button
border-radius 1px 2px / 3px 4px
//变身：
button {
-webkit-border-radius: 1px 2px / 3px 4px;
-moz-border-radius: 1px 2px / 3px 4px;
border-radius: 1px 2px / 3px 4px;
}
变量使用:
data(){
return{
daynamicColor: '#129223',
}
}
onLoad(e){
let that = this;
setTimeout(function () {
that.daynamicColor = 'rgba(20,55,146,0.9)';
}, 3000);
}
注意事项：
--是必要的前缀； (‘--’是因为$被Sass占用了，@被Less占用了)
对应有单位的属性，以字符串拼接数值和单位；
示例二：
:style="'left:'+defaultX+'px;top :'+defaultY+'px;'"
示例三：
<view class="gift_detail_introduce">
<view :style="{'color': daynamicColor}">商品信息</view>
<view>状态</view>
</view>
data(){
return{
daynamicColor: '#129223',
}
}
onLoad(e){
let that = this;
setTimeout(function () {
that.daynamicColor = 'rgba(20,55,146,0.9)';
}, 3000);
}
3.集中预定义样式的值
结合媒体查询的一个实例：
:root {
--accent: #226997;
--main: #333;
--light: #ffffff;
--lighter: #f3f3f3;
--border: #ccc;
--bg: #ffffff;
--category-bg: rgb(92, 184, 92);
--actived: rgb(49, 131, 249);
--price: #f01400;
}
/* 定义 dark 模式的颜色 */
@media (prefers-color-scheme: dark) {
:root {
--accent: #3493d1;
--main: #f3f3f3;
--light: #ececec;
--lighter: #666;
--border: #e6e6e696;
--bg: #333333;
--category-bg: rgb(91, 121, 91);
--actived: rgb(96, 147, 219);
--price: #e84d3f;
}
}
body::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: var(--bg);
}
body::-webkit-scrollbar {
width: 5px;
background-color: var(--bg);
}
body::-webkit-scrollbar-thumb {
background-color: #0ae;
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
}
body {
background-color: var(--bg);
}
/*头部*/
header {
border-bottom: 1px solid var(--border);
}
header>.container>.row>div {
height: 40px;
line-height: 40px;
font-size: 12px;
color: var(--main);
}
header .app {
position: relative;
z-index: 99999;
display: block;
}
header .app img {
display: none;
}
header .app:hover img {
display: block;
position: absolute;
top: 40px;
left: 60px;
margin-left: -60px;
border: 1px solid var(--border);
border-top: none;
}
header a {
color: var(--main);
}
header a:hover {
color: var(--main);
}
/**导航栏**/
.obook-nav {
background-color: var(--bg);
border: none;
border-bottom: 1px solid var(--border);
box-shadow: 0 1px 3px var(--border);
border-radius: inherit;
}
Reference
document.getElementsByTagName('body')[0].className = 'snow-container'; //设置为新的
document.getElementsByTagName('body')[0].className += 'snow-container'; //在原来的后面加这个
document.getElementsByTagName('body')[0].classList.add("snow-container"); //与第一个等价
没有帐号? 立即注册