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

傷城~ 2022-09-11 01:15 230阅读 0赞

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

*   *  前言
     *  实现思路
     *  实现代码

## 前言 ##

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

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

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

## 实现思路 ##

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

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

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

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

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5b6K5b-G57696I-y_size_15_color_FFFFFF_t_70_g_se_x_16]

## 实现代码 ##

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"
      })
     }

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5b6K5b-G57696I-y_size_15_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/a04d7fc671e24ccbb8336554ab2a11ce.png