美文网首页
小程序动态设置css

小程序动态设置css

作者: 拾钱运 | 来源:发表于2020-09-30 09:33 被阅读0次

觉得小程序得操作方法,好神奇,也很好玩。
index.wxml

  <view class="search_main search_main1" id="search_main" style="{{viewData.style}}">
          <text wx:for="{{searchData}}" wx:key="key">{{item}}</text>
        </view>

index.js
let search1Style=--height:110rpx; --overflow:hidden;

Page({
data:{
  viewData:{
      style:''
    },
},
onLoad: function (options) {
      this.queryMultipleNodes()
  },

//获取元素
  queryMultipleNodes:function(){
    var that=this
    const query = wx.createSelectorQuery()
    query.select('.search_main1').boundingClientRect()
    query.exec(function(res){
        that.setData({'viewData.style':search1Style,open:true})
    })
  },
})
})

index.wxss

.search_main1{
    height:var(--height);
    overflow: var(--overflow);
}

相关文章

网友评论

      本文标题:小程序动态设置css

      本文链接:https://www.haomeiwen.com/subject/qboeuktx.html