精华内容
下载资源
问答
  • uniapp动态style
    2022-08-17 17:30:48

    uniapp动态修改样式,使用style动态修改样式,避坑

    使用echarts做柱状图套嵌在<view>中,将xy轴颠倒后,不会自动撑大<view>。所以打算根据计算数据条数修改图表高度。
    微信小程序中。

    经过查询后找到以对象的方式放入style中,代码如下:

    <view class="uChart" :style="echartClass">
    data(){
    	return{
    		echartClass: {
    			height: "85upx"
    		}
    	}
    }
    

    不知道为什么无效,upx换车px,rpx也无效。

    下面找到一种,将对象直接写到style

    <view :style="{height: echartsHeight +'rpx'}">
    data() {
    	return {
    		echartsHeight :80
    	}
    }
    

    这里我是写微信小程序,按照uniapp写法应该用upx,但是这里写upx无效,所以应该是根据平台使用对应的像素单位。微信小程序用的rpx,用px也能生效。

    有更好解决办法的希望能留言互相学习。

    更多相关内容
  • uniapp 使用动态style传参失败

    千次阅读 2020-12-23 00:08:51
    uniapp里面显示一个有服务器返回来的公告,我需要对这个公告实现一个跑马灯式效果,但是动态填充的动画特效参数无效,现在就想问问,怎么样才能正确传入参数给css里面的keyframes,我在最下面用了三种办法,一种...

    在uniapp里面显示一个有服务器返回来的公告,我需要对这个公告实现一个跑马灯式效果,但是动态填充的动画特效参数无效,现在就想问问,怎么样才能正确传入参数给css里面的keyframes,我在最下面用了三种办法,一种常规动态填充,但是无效不报错;一种写死数值,但是有效;另一种就是类似vue里面的写法,虽然在HBuilderX报错,但是在微信开发者工具里面是有效的;

    现在想问问,我到底要怎么写才能避免HbuilderX报错,又能让跑马灯效果实现出来?

    下述出现的 marqueeWidth这个变量是由JavaScript里面计算出来的, 主要代码如下:

    这是scss:

    .announcement-content {

    width:100%;

    overflow: hidden;

    .announcement-text {

    display: inline-block;

    white-space: nowrap;

    animation-name: around;

    animation-duration: 10s;

    /*过渡时间*/

    animation-iteration-count: infinite;

    animation-timing-function: linear;

    }

    }

    @keyframes around {

    from {

    margin-left: 100%;

    }

    to {

    /* var接受传入的变量 */

    margin-left: var(--marqueeWidth);

    }

    }

    这是template:

    {{announcement}}

    {{announcement}}

    {{announcement}}

    第三种办法报这个错误:

    style="--marqueeWidth:{{marqueeWidth}}em": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of

    , use
    .
    展开全文
  • 代码】uniapp小程序动态styleclass。
    <view :style="'width: 100vw;height: '+deviceheight+'rpx;'"></view>
    
    
    <view  		:class="qiuindex == index ? 'fz-28 qiuitemselect' :'fz-28 qiuitem ' "  > 	</view>
    
    
    <view  :style="item.state? clickArr.indexOf(index)!= -1 ? 'background-color: #00aa00;':'background-color: fff;':'background-color: #BEBEBE;'"></view>
    
    
    
    展开全文
  • uniapp动态设置style和class样式

    万次阅读 2020-08-20 14:44:29
    style样式设置 样式名称统一使用驼峰命名方式:例如:fontSize 对象方式 :style="{backgroundImage:`url(${itemB.images})`}" 数组加三元运算方式 :class="[items.isShow?'':'noneActive',subIndex[index] == ...

    注意:以下两种样式设置,涉及到单位的只能用px,而不能使用rpx

    style样式设置

    样式名称统一使用驼峰命名方式:例如:fontSize
    对象方式

    :style="{backgroundImage:`url(${itemB.images})`}"
    
    :style="{ paddingTop: paddingTopNum + 'px' }"
    

    数组加三元运算方式

    :class="[items.isShow?'':'noneActive',subIndex[index] == indexs?'value-item-active':'value-item']"
    

    对象数组方式

    :style="[{paddingTop: background},{color: getColor}]"
    :style="[{ color: activeColor, fontSize: fontSize + 'px' }]"
    

    对象方式

    :style="{left:`${iconDistance}rpx`}"
    
    :style="{backgroundImage:`url(${topBgImg})`}"
    

    style方式calc

    :style="{height:'calc(100vh - ' + pageTopHeight +'px - 140rpx)'}"
    

    class样式设置

    对象方式

    :class="{ active: isActive, 'text-danger': hasError }" 
    

    数组方式

    :class="[activeClass, errorClass]"
    

    三元运算方式

    :class="[isActive ? activeClass : ' ', errorClass]"
    

    数组加对象方式

    :class="[{ active: isActive }, errorClass]"
    
    展开全文
  • 一、style样式动态设置 1.普通对象动态添加(比较常见) <view :style="{color:fontColor}"> </view> <view :style="{ paddingTop: num + 'px' }"></view> <view :style="{...
  • uniapp 设置 style 动态背景

    千次阅读 2019-08-29 16:26:28
    uniapp采坑总结 <view class="uni-comment-list" :style="[{backgroundImage:'url(' + imgUrl + ')' }]"> imgUrl 只支持网络路径和base64图片,不支持相对路径和绝对路径 还可以根据条件去选择背景图 <...
  • :style="{ backgroundImage:‘url(’+img+’)’}
  • button v-if="couponState" :style="StyleStatic" hover-class="_active-hover" :class="[couponBtnsStyle,couponBntsBorder]" @click.stop="$u.throttle(receiveNow,1000)" class="bottom-btn" :plain=...
  • uniapp如何设置动态样式

    千次阅读 2020-12-23 00:09:24
    uniapp设置动态样式的方法:1。用户点击按钮后,动态切换按钮选择样式;2.给标签渲染各种颜色,代码是[。sign style-0 { color:# 3 AC 9e 3;边框:1px实心# 3ac9e3}】。本教程操作环境:windows7系统,uni-app版本...
  • uniappstyle里三元运算符的写法

    千次阅读 2019-08-05 16:00:45
    style:有个括号要注意 <text class="title" :style="'filter:grayscale('+(funding>'0'?'100%':'0')+')'" style="color:red;">{{title}}</text> class:中括号要注意 <i class="iconfont " :...
  • 正常不绑定的时候 ... style="background-image: url(../../../static/img/l3.jpg);"> 绑定的时候 <view class="site" v-for="(item,index) in fieldData" :key="item.id" :style="{backgro..
  • css针对动态class和style的处理
  • uni-app-style

    千次阅读 2020-12-31 08:47:19
    基于uni-app的简单样式库快速开始将此文件放入static目录下,并在App.vue的中引入@import "static/styles/index.scss";至此,就可以在项目中使用此样式库中的样式了。使用方法字体大小样式库提供了一个类f-x,这个x...
  • uniapp、vue中动态添加绑定style、class
  • uniapp :style 的用法(切换背景)

    千次阅读 2021-04-29 13:39:29
    :style=" { background: mmiuy? bg1 : 'url('+bg2+')' ,fontSize:16+'px'}" 我做的效果是 一个是选择背景色一个是选择背景图 所以: mmiuy 为 true 或者 为false 等于true的情况下 则:获取 bg1的色彩值 等于false...
  • 基本技能,实践操作能力', themColor:'color58C4CC' }, { title:'家长工作', txt:'确保每位家长都能收到孩子的体能成果', themColor:'color7E8FEF' }] } :style="{'background':item.TypeColor}" {{itemList[0]....
  • uniapp 动态背景图写法

    2022-01-11 10:21:59
    :style="{backgroundImage:'url(' + (channelInfo.img ? channelInfo.img : defaultImg) + ')'}
  • view class="c-bg-g l-ft l-fw" :style="[Style]"></view> js computed: { Style() { let { page_margin, goods_margin } = this.data let obj = { "padding": `0 ${page_margin}px`, ...
  • (1) 动态class样式模式一data () {return {workMode:"simple",}},.shape_6 {border-radius: 50%;/* background-color: rgb( 215, 222, 227 ); */position: absolute;left: 642px;top: 251px;width: 152px;height: ...
  • uni-app 动态绑定class 和 style

    千次阅读 2020-12-31 08:47:24
    // 绑定单个内联样式// 绑定单个class属性// 数组的方式,直接绑定多个 class 属性// 绑定多个class属性// data 中声明:class="classObject"data() {return {classObject:{ active: true, sort:false }}}// 第三种...
  • uniapp 小程序在开发中遇到一个需求,就是需要将一些自定义的css var变量绑定到页面根元素的style身上,方便使用,这里用的是sass预处理器。
  • Uniapp动态设置组件颜色

    千次阅读 2022-04-27 09:37:36
    这里主要是使用了Vue 内联样式,动态绑定某一样式属性:color,background-color等 <button type="primary" plain="true" @click="onClick(item)" :style="{'background-color':callColor(item)}" class="calling...
  • -- top-box占位 --> <view :style="setHeight()"> </view> //data topHeight : 0, //methods // 动态设置占位区高度 setHeight() { this.$nextTick(() => { uni.createSelectorQuery().select('.top-box')....
  • uniapp动态设置元素的高度

    千次阅读 2021-08-18 10:53:51
    uniapp动态设置元素的高度 在uniapp中如果要适配各种不同大小的屏幕的高度,那么就得动态设置元素的高度。 <view class="flex flexColumn" style="border-radius: 20rpx 20rpx 0px 0px;background-color: #f7f7f7...
  • 在样式中添加方法 <view class="" :style="{color: getColor(item.Name)}"> {{item.Name}} </view> 在methods中写方法 getColor(){ }
  • class <view :class="[Expression ? 'className1' : 'className2']"></view> style <view :style="'color:' + (Expression ? #FFFFFF: '#000000')"></view>
  • vue uniapp 动态设置页面背景图

    千次阅读 2020-07-02 10:51:54
    uniapp中的背景图需要动态变换 一般结合后台返回数据渲染 很简单 但是每次都记不住 自己写写加深印象 这里是简单的html 代码 <view class="loginBg" :style="{backgroundImage: 'url(' + imageURL + ')', '...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 13,246
精华内容 5,298
关键字:

uniapp动态style