在獲取文字識別數據之后，對數據進行wx:for循環加了邊框如圖效果：

需求：點擊不同邊框獲取不同文字，再次點擊取消選中；選中背景為#999；

<view wx:for="{{img_dataVal}}" wx:for-item="item" class='text_list {{item.is_hide?"change_bg":""}}' style='left:{{item.location.left/bili}}px;top:{{item.location.top/bili}}px;{{item.location.width/bili}}px;height:{{item.location.height/bili}}px' data-numid="{{index}}" bindtap='get_numid'>
  
  </view>

當然是通過三目運算符了，但是在對其進行操作后，所有樣式都會改變；所有我們需要一個唯一的屬性來判斷其是否被選中；

img_dataVal的數據結構為

因為是第三方接口無法添加多余返回數據屬性，那只好自己添加啦；

具體這樣操作：每次點擊時我在img_dataVal的每條數據里新增一個is_hide屬性；

if (this.data.img_dataVal[numid].is_hide){
      this.data.img_dataVal[numid].is_hide = !this.data.img_dataVal[numid].is_hide;
    }else{
      this.data.img_dataVal[numid].is_hide = true;  
    }

不要忘了存儲數據：

this.setData({ img_dataVal: this.data.img_dataVal})

每次點擊時進行判斷，然后在dom中對is_hide進行狀態進行判斷，來動態添加class名

class='text_list {{item.is_hide?"change_bg":""}}'

實現效果為：

再次點擊會取消選中狀態；

因為拍照和選擇相冊等，圖片尺寸不一致；

怎么讓圖片進行全屏放置，又不失真呢，當然就是等比縮放了；

wx.chooseImage({
      count: 1,
      sizeType: ['compressed'],
      sourceType: ['album', 'camera'],
      success: function (res) {
        that.setData({ img_url: res.tempFilePaths[0] })
        wx.getImageInfo({
          src: res.tempFilePaths[0],
          success: function (res) {
            that.setData({ img_w: res.width})
            that.setData({ img_h: res.height})
            that.setData({ bili: res.width / wx.getSystemInfoSync().windowWidth})
            that.setData({ wx_wx.getSystemInfoSync().windowWidth })
          }
        })

選擇圖片以后獲取屏幕寬度wx.getSystemInfoSync().windowWidth，圖片寬度設置為屏幕寬度；

計算圖片實際寬度與屏幕寬度的比例，根據這個比例來控制高度等信息。

思路給你們，操作在于你們了。

總結

以上是生活随笔為你收集整理的wx:for修改样式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。