在獲取文字識(shí)別數(shù)據(jù)之后，對數(shù)據(jù)進(jìn)行wx:for循環(huán)加了邊框如圖效果：

需求：點(diǎn)擊不同邊框獲取不同文字，再次點(diǎn)擊取消選中；選中背景為#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>

當(dāng)然是通過三目運(yùn)算符了，但是在對其進(jìn)行操作后，所有樣式都會(huì)改變；所有我們需要一個(gè)唯一的屬性來判斷其是否被選中；

img_dataVal的數(shù)據(jù)結(jié)構(gòu)為

因?yàn)槭堑谌浇涌跓o法添加多余返回?cái)?shù)據(jù)屬性，那只好自己添加啦；

具體這樣操作：每次點(diǎn)擊時(shí)我在img_dataVal的每條數(shù)據(jù)里新增一個(gè)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;  
    }

不要忘了存儲(chǔ)數(shù)據(jù)：

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

每次點(diǎn)擊時(shí)進(jìn)行判斷，然后在dom中對is_hide進(jìn)行狀態(tài)進(jìn)行判斷，來動(dòng)態(tài)添加class名

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

實(shí)現(xiàn)效果為：

再次點(diǎn)擊會(huì)取消選中狀態(tài)；

因?yàn)榕恼蘸瓦x擇相冊等，圖片尺寸不一致；

怎么讓圖片進(jìn)行全屏放置，又不失真呢，當(dāng)然就是等比縮放了；

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，圖片寬度設(shè)置為屏幕寬度；

計(jì)算圖片實(shí)際寬度與屏幕寬度的比例，根據(jù)這個(gè)比例來控制高度等信息。

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。