微信小程序动态设置样式

显示行号 | 选择喜欢的代码风格

微信小程序里的样式 wxss ，通过绑定后端动态从 API 接口获取，传入来的变量值的方法

微信小程序里的样式 wxss ，如何绑定后端 JS 动态从 API 接口获取，传入来的变量值？比如后端 API 返回：api_width=300，那么在 wxss 样式里，如果希望设置 width: {{api_width}} 是否可行，如果不行，该怎么设置？

微信小程序通过 API 接口，动态修改样式值：

在微信小程序中，wxss（WeiXin Style Sheet）是用来定义样式的，它并不支持直接绑定后端返回的变量值。但是，可以通过动态设置样式的方式来实现类似的效果。

假设后端 API 返回了一个变量值 api_width=300，你可以在前端的 JavaScript 中通过获取后端返回的数据，并动态修改样式。具体的步骤如下：

// 在前端的 js 文件中发起请求获取后端数据
wx.request({
  url: 'your_api_url_here',
  success: function (res) {
    // 获取后端返回的数据
    var api_width = res.data.api_width;

    // 动态设置样式
    // 使用 wx.createSelectorQuery 获取节点，并修改节点的样式
    wx.createSelectorQuery().select('#your_element_id').boundingClientRect(function(rect){
      var width = api_width + 'px';
      // 使用 setData 方法将样式应用到页面中
      that.setData({
        'your_element_style': 'width: ' + width
      });
    }).exec();
  },
  fail: function (err) {
    // 处理请求失败的情况
  }
});

在页面的 wxml 文件中定义要修改样式的元素，并绑定一个 ID。

<!-- 在 wxml 文件中定义要修改样式的元素，并绑定一个 ID -->
<view id="your_element_id" style="{{your_element_style}}"></view>

// 在页面的 js 文件中定义一个 data 中的变量来存储动态样式
Page({
  data: {
    your_element_style: ''
  },
  // 其他页面逻辑...
});

在页面的 js 文件中，定义一个 data 中的变量来存储动态样式。

// 在页面的 js 文件中定义一个 data 中的变量来存储动态样式
Page({
  data: {
    your_element_style: ''
  },
  // 其他页面逻辑...
});

微信小程序注意事项：

由于微信小程序是前端渲染，wxss 在编译时即确定，无法在运行时修改。因此，你需要通过 JavaScript 动态设置样式来模拟绑定后端数据的效果。
示例中通过 wx.createSelectorQuery() 获取节点，并通过 setData() 方法来更新样式，确保样式的修改能够即时生效。

通过上面步骤，当后端 API 返回 api_width=300 时，前端的 JavaScript 会动态将元素的宽度设置为 300px，从而达到动态绑定样式的效果。

微信小程序动态设置样式

微信小程序通过 API 接口，动态修改样式值：

微信小程序注意事项：

微信小程序扩展阅读：

CommandNotFound ⚡️ 坑否 - 其他频道扩展阅读：

发表评论