精华内容
下载资源
问答
  • uni-app动态绑定样式style
    万次阅读
    2019-09-24 15:56:17

    uni-app动态绑定width

    需求描述

    做的项目需要实现一个类似table的功能,但是由于表格的内容不是固定的,如果把css的width写死,就可能导致内容太长而无法全部显示。
    

    解决需求

    要解决上述问题就需要动态的改变width
    
    添加内联样式如下:
    
    <view class="parts1" **:style="{width:HN_width}**">库房</view>
    
    computed: {
    			// 库房——最大长度
    			HN_width() {
    				var MaxLength = 2;
    				var Row_Materials = this.Row_Materials;
    				if (Row_Materials != null && Row_Materials.length > 0) {
    					Row_Materials.forEach((item, index) => {
    						if (item['HN'].length > MaxLength) {
    							MaxLength = item['HN'].length;
    						}
    					});
    				}
    				return uni.upx2px(MaxLength * 30 + 20) + 'px';
    			},
    }
    
    因为uni-app无法直接使用upx动态修改,所以需要使用uni.upx2px(Number)转换一下。这样就可以根据内容的长度动态的修改width了。
    可以根据自己的实际需求应用在其他场景
    
    更多相关内容
  • uni-app动态绑定class和style

    千次阅读 2021-06-16 14:07:26
    目录动态绑定calss动态绑定style 动态绑定calss class="[{‘类名’:条件},{‘类名’:条件},{‘类名’:条件}]" 为不同条件的image绑定不同的样式 <image class="img1" :class="[{'img1':index == 0},{'img...

    动态绑定calss

    1. class="[{‘类名’:条件},{‘类名’:条件},{‘类名’:条件}]"
      为不同条件的image绑定不同的样式
    	<image 
    	 class="img1" 
         :class="[{'img1':index == 0},{'img2':index == 1},{'img3':index == 2}]"
         :src="avtUrl" 
        >
    </image>
    
    1. 数组的方式,直接绑定多个 class 属性
       // 数组的方式,直接绑定多个 class 属性
        <view :class="['green', 'font-big','font-bold' ]" ></view>
    

    动态绑定style

       // 绑定单个内联样式
        <view :style="{'display':config.isHaveSearch ? 'block':'none'}" ></view>
        <view :style="{color:item.age<18?'#ccc':''}"></view>
        
        <view :style="{ color: activeColor, fontSize: fontSize + 'px' }"></view>
        <view :style="[{ color: activeColor, fontSize: fontSize + 'px' }]"></view>
    
    // 复杂情况
    		<text 
    		 class="title" 
    		 :style="'filter:grayscale('+(funding>'0'?'100%':'0')+')'" 
    		 style="color:red;"
    		>
    		{{title}}
    		</text>
    
    展开全文
  • uni-app】文本框、style样式、点击事件等动态绑定的实例

     

    <template>
    	<view class="content">
    		<!-- <image class="logo" src="/static/logo.png"></image> -->
    		<view class="text-area">
    			<text v-bind:class="titleClass">【{{title}}】</text>
    		</view>
    		<view>
    			<input type="text" v-model="title">
    		</view>
    		<br>
    		<button @click="redClick">
    			字体变红色
    		</button>
    
    		<button @click="blueClick">
    			字体变蓝色
    		</button>
    
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				title: 'Hello',
    				titleClass: 'title_2'
    			}
    		},
    		onLoad() {
    
    		},
    		methods: {
    			redClick() {
    				this.title = "Hello,红色!"
    				this.titleClass = 'title_1';
    			},
    			blueClick() {
    				this.title = "Hello,蓝色!"
    				this.titleClass = 'title_2';
    			}
    		}
    	}
    </script>
    
    <style>
    	.content {
    		display: flex;
    		flex-direction: column;
    		align-items: center;
    		justify-content: center;
    	}
    
    	.logo {
    		height: 200rpx;
    		width: 200rpx;
    		margin-top: 200rpx;
    		margin-left: auto;
    		margin-right: auto;
    		margin-bottom: 50rpx;
    	}
    
    	.text-area {
    		display: flex;
    		justify-content: center;
    		margin-top: 20px;
    		margin-bottom: 20px;
    	}
    
    	.title_1 {
    		font-size: 56rpx;
    		color: red;
    
    	}
    
    	.title_2 {
    		font-size: 56rpx;
    		color: blue;
    
    	}
    	input{
    		border: 1px #d1d1d1 solid;
    	}
    </style>
    

    展开全文
  • uni-app条件动态绑定样式

    千次阅读 2020-10-22 13:49:40
    图片是否显示, 因为图片是绝对定位, 文本需要缩进行,这里动态绑定是否缩进行 直接看代码吧,不难 <template> <view class="yh-list"> <!--顶部搜索导航栏 S --> <uni-nav-bar-classify ...

    首先我们需要了解实现什么效果,

    这里我想实现的效果

    图片是否显示, 因为图片是绝对定位, 文本需要缩进行,这里动态绑定是否缩进行

    直接看代码吧,不难

    <template>
    	<view class="yh-list">
    		<!--顶部搜索导航栏 S -->
    		<uni-nav-bar-classify class="yh-list-nav" background-color="#FFFFFF">
    			<view class="nav-left" slot="left" @click="goBack">
    				<image class="go-back" :src="iconGoBack" mode="widthFix"></image>
    			</view>
    			<view class="input-box-right">
    				<input class="text-input" type="text" :value="hotSearchDefault || '请输入关键字'" />
    				<image class="icon-search" src="@/static/icon/search.png" mode="widthFix"></image>
    			</view>
    		</uni-nav-bar-classify>
    		<!--顶部搜索导航栏 E -->
    		<!-- 写入内容 S -->
    		<view class="comment">
    			<!-- 顶部导航 S -->
    			<view class="top-nav">
    				<view class="menu">
    					<block v-for="(item, index) in goodsMenuTop" , :key="index">
    						<view class="menu-list">
    							<view class="left">
    								{{item.title}}
    							</view>
    							<block v-if="index == 0">
    								<image class="select-image" src="../../../static/icon/icon-select-close.png" mode="widthFix"></image>
    							</block>
    							<block v-if="index == 2">
    								<image class="select-image" src="../../../static/icon/icon-select-close.png" mode="widthFix"></image>
    							</block>
    						</view>
    					</block>
    					<view class="layout-cut" @click="chooseLayoutCut">
    						<image class="layout-cut-image" src="../../../static/icon/icon-list.png" mode="widthFix"></image>
    					</view>
    				</view>
    				<view class="goods-filtrate">
    					<view class="shaixuan">
    						筛选
    					</view>
    					<image class="filtrate-image" src="../../../static/icon/icon-shaixuan.png" mode="widthFix"></image>
    				</view>
    			</view>
    			<!-- 顶部导航 E -->
    			<block v-if="layoutState != false">
    				<!-- 四宫格布局 S -->
    				<view class="grid-layout">
    					1
    				</view>
    				<!-- 四宫格布局 E -->
    			</block>
    			<block v-else>
    				<!-- 列表布局 S -->
    				<view class="list-layout">
    					<view class="goods" v-for="(item, index) in goodsList" :key>
    						<view class="goods-cover">
    							<image class="cover-image" :src="item.goods_cover || errorImage" mode=""></image>
    						</view>
    						<view class="goods-info">
    							<view class="goods-name">
    								<block v-if="item.is_activity != 0">
    								<image class="goods-activity" src="../../../static/banner/1.jpg" mode=""></image>
    								</block>
    								<text class="name" :class="{'text-indent': (item.is_activity != 0)}">{{item.goods_name}}</text>
    							</view>
    						</view>
    					</view>
    				</view>
    				<!-- 列表布局 E -->
    			</block>
    		</view>
    		<!-- 写入内容 E -->
    	</view>
    </template>
    
    <script>
    	import uniNavBarClassify from '@/components/uni-nav-bar-classify/uni-nav-bar-classify.vue'
    	export default {
    		components: {
    			uniNavBarClassify
    		},
    		data() {
    			return {
    				iconGoBack: this.$mAssetsPath.iconGoBack,
    				errorImage: this.$mAssetsPath.errorImage,
    				hotSearchDefault: '请输入关键字', // 搜索默认关键字
    				goodsMenuTop: this.$mConstDataConfig.goodsMenuTop, // 商品列表导航菜单
    				layoutState: false, // 显示布局状态默认false
    				goodsList: [
    					{
    						goods_name: "高清镜面, 智能屏显, 9D音效高清镜面, 智能屏显, 9D音效高清镜面, 智能屏显, 9D音效",
    						goods_cover: "",
    						goods_price: 78.00,
    						goods_comment_num: 1000,
    						goods_good_reputation: 93,
    						shop_name: "惠多多专营店",
    						is_advertising: 0,
    						is_activity: 1,
    						is_autotrophy: 0,
    					},
    					{
    						goods_name: "高清镜面, 智能屏显, 9D音效高清镜面, 智能屏显, 9D音效高清镜面, 智能屏显, 9D音效",
    						goods_cover: "",
    						goods_price: 78.00,
    						goods_comment_num: 1000,
    						goods_good_reputation: 93,
    						shop_name: "惠多多专营店",
    						is_advertising: 0,
    						is_activity: 0,
    						is_autotrophy: 0,
    					}
    				]
    			}
    		},
    		methods: {
    			// 返回上一级事件
    			goBack() {
    				uni.navigateBack({
    					delta: 1
    				})
    			},
    			// 布局切换
    			chooseLayoutCut() {
    				this.layoutState = !this.layoutState
    			}
    		}
    	}
    </script>
    
    <style lang="scss">
    	.yh-list {
    		width: 100%;
    		background-color: #fff;
    		display: flex;
    		background-color: $color-white;
    		/*  #ifdef  APP-PLUS  */
    		margin-top: calc(20upx + var(--status-bar-height));
    
    		/*  #endif  */
    
    		.yh-list-nav {
    			position: fixed;
    			z-index: 99;
    			top: 0;
    
    			.nav-left {
    				width: 30px;
    				padding-top: 6px;
    
    				.go-back {
    					width: 20px;
    				}
    			}
    
    			.input-box-right {
    				width: 100%;
    				background-color: #f8f8f8;
    				display: flex;
    				align-items: center;
    				height: 28px;
    				border-radius: 40upx;
    				padding: 0 20upx 0 30upx;
    
    				.icon-search {
    					width: 22px;
    				}
    
    				.text-input {
    					width: 100%;
    					font-size: 14px;
    					color: #909399;
    				}
    			}
    		}
    
    		,
    		// 导航菜单
    		.comment {
    			width: 100%;
    			background-color: #f8f8f8;
    			// display: flex;
    			height: 100%;
    			position: absolute;
    			padding-top: 88upx;
    			/* #ifdef APP-PLUS */
    			padding-top: calc(88upx + var(--status-bar-height));
    			/* #endif */
    			bottom: 0;
    
    			.top-nav {
    				width: 100%;
    				height: 80upx;
    				background-color: #FFFFFF;
    				display: flex;
    				align-items: center;
    				font-size: $font-sm;
    				box-shadow: 0 1upx 5upx #EEEEEE;
    
    				.menu {
    					width: 80%;
    					display: flex;
    					align-items: center;
    					justify-content: space-between;
    
    					.menu-list:nth-child(1),
    					.menu-list:nth-child(3) {
    						width: 180upx;
    						height: 50upx;
    					}
    
    					.menu-list:nth-child(3) {
    						justify-content: center;
    					}
    
    					.menu-list {
    						display: flex;
    						align-items: center;
    						justify-content: center;
    
    						.select-image {
    							width: 35upx;
    						}
    					}
    
    					.layout-cut {
    						display: flex;
    						align-items: center;
    						margin-right: 28upx;
    					}
    
    					.layout-cut image {
    						width: 40upx;
    					}
    				}
    
    				.goods-filtrate {
    					width: 20%;
    					display: flex;
    					align-items: center;
    					justify-content: center;
    					border-left: 1rpx solid #EEEEEE;
    					height: 30upx;
    
    					.shaixuan {}
    
    					.filtrate-image {
    						width: 30upx;
    						margin-left: 5upx;
    					}
    				}
    			}
    			// 商品列表布局
    			.list-layout {
    				padding: 20rpx;
    				.goods {
    					display: flex;
    					justify-content: space-between;
    					.goods-cover {
    						width: 300rpx;
    						height: 300rpx;
    						.cover-image {
    							width: 100%;
    							height: 100%;
    						}
    					}
    					.goods-info {
    						width: 392rpx;
    						.goods-name {
    							font-size: $font-base;
    							.goods-activity {
    								width: 50rpx;
    								height: 28rpx;
    								border-radius: 5rpx;
    								margin-top: 6rpx;
    								margin-right: 20rpx;
    								vertical-align: middle;
    								position: absolute;
    							}
    							.text-indent {
    								text-indent: 70rpx
    							}
    							.name {
    								text-overflow: -o-ellipsis-lastline;
    								overflow: hidden;
    								text-overflow: ellipsis;
    								display: -webkit-box;
    								-webkit-line-clamp: 2;
    								line-clamp: 2;
    								-webkit-box-orient: vertical;
    							}
    						}
    					}
    				}
    			}
    		}
    	}
    </style>
    

    判断样式主要代码       :class="{'text-indent': (item.is_activity != 0)}"

    有什么疑问可下方留言, 如有更好的解决办法,请下方留言,共同学习,谢谢大家支持

    展开全文
  • uni-app 动态绑定class 和 style

    千次阅读 2020-12-31 08:47:24
    // 绑定单个内联样式// 绑定单个class属性// 数组的方式,直接绑定多个 class 属性// 绑定多个class属性// data 中声明:class="classObject"data() {return {classObject:{ active: true, sort:false }}}// 第三种...
  • :style="{backgroundImage:`url(${this.banner})`}" this.banner 就是后台请求到的背景图
  • uni-app css动态绑定

    千次阅读 2019-12-04 11:48:30
    现在有个需求,需要每3个模块的颜色是一致的,1,2,3是黄色,紫色,蓝色,4,5,6是黄色,紫色,蓝色,以此类推。... 官网class绑定:https://uniapp.dcloud.io/use?id=class-%E4%B8%8E-style-%E7%BB%91%E5%AE%9A
  • 由于业务需要,onLoad()获取到手机屏幕长度然后将长度动态绑定至view标签的sytle属性中,在HbuilderX内置浏览器中显示正常,但在微信小程序中却显示不出来绑定样式,下面是绑定时的代码。 页面标签部分: <...
  • 一般在script语言块的data块中定义变量,在template语言块的视图中用{{}}调用...style一般定义行内样式,也可以进行属性绑定uni-app中的事件和web中有一定区别;通过@进行事件绑定;触发事件时,可以传入动态参数。
  • 三元运算符的使用 当isRed==“1” 为true 给view添加class=red 当isRed==“1” 为false给view添加...动态style <view :style="{fontSize: fontSize+'px'}">style</view> var $this = ''; data() { re
  • uni-app 样式绑定

    2020-11-11 08:50:02
    使用v-bind:綁定,也可以简写用: :class :style 绑定的内容来自data中
  • uni-app 动态修改公共组件行内样式

    千次阅读 2021-01-26 21:41:38
    公共组件 <template> <view>...view :style="[{ left: market_left, width: market_width + 'px', backgroundColor: bg_color }]"></view> </view> </template>
  • uni-popup官方文档 我这里的背景是弹出一个选择规格的菜单。使用vue3+ts,使用组合式api 首先看看在vue3+ts+setup下的使用的使用: <template> <!-- 定义一个按钮,用于打开弹出层 --> <view style...
  • class <view :class="[Expression ? 'className1' : 'className2']"></view> style <view :style="'color:' + (Expression ? #FFFFFF: '#000000')"></view>
  • uni-app简单介绍

    千次阅读 2021-11-10 11:10:05
    一、什么是uni-appuni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等...
  • uni事件绑定、事件传参;uni生命周期;下拉刷新;上传图片、预览图片;uni导航跳转;创建组件;组件通讯,父子传值,兄弟组件通讯
  • 直接在需要修改样式的页面顶部添加,这里的root-font-size是我动态绑定的字体大小,可以按照自己的需要来设置样式参数。经过多次尝试后发现uni-app官网推出的page-meta可以修改根节点的属性。...
  • (3)进行绑定样式 进行动态修改 类型1: 插件:在插件里找到样式参数,进行绑定,例如 :active-color="item.color" 代码展示: <template> <view> <view class="calorie-ingest" v-for="...
  • uni-app(date属性,Class 与 Style 绑定,v-if,v-else)
  • uni-appuni-app的基础知识

    千次阅读 2022-03-29 11:27:57
    02.uni-app的环境搭建并创建项目运行 项目运行-浏览器: 项目运行-微信开发者工具 注意事项: (1)使用微信开发者工具运行项目时,需要添加微信开发者工具的目录 (2)在微信开发者工具-设置-安全设置:打开端口 ...
  • uni-app样式1.uni-app种的样式1.1使用图标2.uni-app中的数据绑定3.v-bind动态绑定属性4.uni中的事件 1.uni-app种的样式 rpx即响应式px,一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准,750px恰好为...
  • uni-app学习记录——1.uni-app基础语法

    千次阅读 2020-06-03 16:35:09
    Uni-app快速入门
  • uni-app入门学习

    2022-04-07 22:24:39
    uni-app样式学习 在uni-app中使用字体图标和开启scss 条件注释跨端兼容 uni中的事件 导航跳转 组件创建和通讯,及组件的生命周期 uni-app中使用uni-ui库 项目:黑马商城项目 1.uni-app介绍 官方网页 uni-app ...
  • uni-app基础(一)

    2021-12-18 17:25:04
    创建项目并运行在浏览器上的效果 ... 若HBuilderX不能正常启动微信开发者工具,需要开发者手动启动,然后将uni-app生成小程序工程的路径拷贝到微信开发者工具里面,在HBuilderX里面开发,在微信开
  • Uni-App - 模板语法 - 数据绑定

    万次阅读 2019-02-19 13:32:26
    基础数据绑定 变量赋值: &lt;script&gt; export default { data: { title: 'Hello', name : 'hcoder' }, ..... 在视图中使用 {{}} 调用变量: &lt;template&gt; &lt;view class=&...
  • uni-app 框架超详细新手入门

    千次阅读 2021-06-28 21:10:23
    什么是uni-app?(介绍) uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架。 开发者通过编写 Vue.js 代码,uni-app 将其编译到iOS、Android、微信小程序等多个平台,保证其正确运行并达到优秀体验。 uni-app 继承...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,010
精华内容 404
关键字:

uni-app动态绑定样式style