微信小程序实现通过js操作wxml的wxss属性示例

前言
实现思路
实现代码

前言

在web端、手机端、webApp中可以通过js获取dom的方式设置dom属性。

微信小程序中，不能通过这种方式进行操作。

如何在微信小程序中在wxml中操作wxss的属性。

实现思路

通过利用数据绑定实现动态改变样式，

1、在wxxml标签内嵌css属性上绑定js的date值

2、通过js中绑定css属性的date值改变wxml标签内嵌的css属性

实现效果：点击所在地区，弹出选择地区的浮层

实现代码

editAddress.wxml：

<view class='dialogWrap' style='display:{{isShowSelectAddress}}'><view class='selectaddress' >选择地区</view>
</view>
<view class='item' bindtap='showselectregion'><view style='color:#000;margin-top:10px;margin-left:10px'>所在地区 ：</view><text style='margin-top:10px'>gdgdfgdf</text><image class='rightdirectionclass' src='../../../../images/leftdirection.png' ></image>
</view>

editAddress.js：

data: {//定义是否显示地址的默认变量值为 noneisShowSelectAddress:"none"},//绑定事件， 更改isShowSelectAddress 的值为block 显示showselectregion:function(){this.setData({isShowSelectAddress:"block"})}

微信小程序实现通过js操作wxml的wxss属性示例相关推荐

微信小程序如何通过js操作wxmll的wxss属性
微信小程序如何通过js操作html的css属性在web端.手机端.webApp中可以通过js获取dom的方式设置dom属性. 微信小程序中,不能通过这种方式进行操作. 如何在微信小程序中在wxml中 ...
微信小程序-贪吃蛇开发4 wxml和wxss学习
本系列是作者自学实践过程的记录本文是微信的wxml和wxss学习使用有问题欢迎讨论目录一.标签 1.1 view 1.2 modal 二.wxss 三.详细学习一.标签 wxml和html类 ...
微信小程序一键创建js,json,wxml,wxss
在写小程序创建项目的时候每一个一般都会有 js,json wxml ,wxss 一个选择一个一个创建也可以一键创建创建的时候选择Component 输入名字这四个就一下创建了这样创建写的时候j ...
微信小程序一键置顶操作详解：
微信小程序一键置顶操作详解: 第一种方式:采用scroll-view滚动视图实现第二种方式,直接用view实现第一种方式:采用scroll-view滚动视图实现下面是代码简介: wxml文件代码 ...
微信小程序获取app.js中的公共数据
微信小程序获取app.js中的公共数据小程序项目结构如下 app.js App({list: [{id: 1,name: '完美型',content: "属于第一型的你,相信常常这感觉,对 ...
微信小程序首页index.js获取不到app.js中动态设置的globalData的原因以及解决方法
微信小程序首页index.js获取不到app.js中动态设置的globalData的原因以及解决方法参考文章: (1)微信小程序首页index.js获取不到app.js中动态设置的globalDat ...
微信小程序（购物车）--在wxml中设置保留小数位数
微信小程序(购物车)–在wxml中设置保留小数位数一.在该页面文件夹下新建一个wxs后缀的文件 var filters = {toFix: function (value) {return valu ...
微信小程序--在app.js 和其他页面中更改globalData的值
微信小程序--在app.js 和其他页面中更改globalData的值 app.js中修改其他页面 app.js中修改在app.js中,应当在小程序初始化完成以后再更改全局变量的值,即在onLau ...
微信小程序认证成功怎么操作
微信小程序认证成功怎么操作?要花你多少钱呢! 现在是Z世代,新能源车.芯片.AI的时代了,不会还有企业.店铺,想通过聘请程序员,或者花个大几万去开发一个微信小程序吧. 不会吧,这不会是真的吧. 今天珍 ...

微信小程序实现通过js操作wxml的wxss属性示例

微信小程序实现通过js操作wxml的wxss属性示例

前言

实现思路

实现代码

微信小程序实现通过js操作wxml的wxss属性示例相关推荐

最新文章

热门文章