微信小程序实现通过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: {
 	//定义是否显示地址的默认变量值为 none
  isShowSelectAddress:"none"
 },

//绑定事件， 更改isShowSelectAddress 的值为block 显示
 showselectregion:function(){
  this.setData({
   isShowSelectAddress:"block"
  })
 }