最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【已解决】小程序中给组件tags传递Boolean参数控制是否使用特殊样式

参数 crifan 256浏览 0评论
折腾:
【已解决】绘本查询小程序的iPhoneX中超长的tag高度和间距异常
期间,此处问题基本上得到解决:
列表页中tag,可以根据media query判断出iPhone X(模拟器和真机)时,使用特殊的样式:
/* follow heigh=812px only work for real phone: iPhone X */
@media screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
  .tag_normal{
    max-width:220px;
  }
}

/* follow heigh=724px only work for weixin iPhone X emulator */
@media screen and (device-width: 375px) and (device-height: 724px) and (-webkit-device-pixel-ratio: 3) {
  .tag_normal{
    max-width:220px;
  }
}
从而使得长tag时,不换行,解决了之前长tag换行高度异常的布局问题
但是现在还有一个问题:
详情页中的上面的tags,显示的宽度被限制了:
现在要去解决:
如何传递参数给tags这个组件
确保:
正常时候,主页列表和详情页列表中,对于iPhone X都是特殊处理的,
但是详情页中传递特殊bool参数,表示不特殊处理
对于小程序中组件参数传递来说:
想要传递Boolean的话:
Component 构造器 · 小程序
“properties: {
    myProperty: { // 属性名
      type: String, // 类型(必填),目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型)”
经过研究:
对于组件的定义:
  properties: {
...
    noTagMaxWidth: {
      type: Boolean,
      value: false,
      observer: function (newNoTagMaxWidth, oldNoTagMaxWidth, changedPath) {
        console.log("useExtraStyle observer: newNoTagMaxWidth=%s, oldNoTagMaxWidth=%s, changedPath=%o",
          newNoTagMaxWidth, oldNoTagMaxWidth, changedPath)

        if (newNoTagMaxWidth) {
          this.setData({
            tagNormalStyle: "tag_normal",
          })
        } else {
          this.setData({
            tagNormalStyle: "tag_normal tag_max_width",
          })
        }

        console.log("this.data.tagNormalStyle=%s", this.data.tagNormalStyle)
      }
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    highlightTagList: [],
    normalTagList: [],
    tagNormalStyle: "tag_normal tag_max_width"
  },
调用的话:
        <tags
          input-tag-list="{{curBookInfo.tags}}"
          book-difficulty="{{curBookInfo.grading.difficulty}}"
          no-tag-max-width="false"
          no-tag-max-width="False"
          no-tag-max-width=false
        />
都是不对的
期间搜了:
js boolean
JavaScript Booleans
JavaScript Boolean 对象
Boolean | MDN
JavaScript Boolean(布尔)对象 | 菜鸟教程
期间突然想到:
之前折腾React(和html+js)时,好像Boolean参数,只是是否传递影响True或False?
去试了试,果然是:
要写成:
        <tags
          input-tag-list="{{curBookInfo.tags}}"
          book-difficulty="{{curBookInfo.grading.difficulty}}"
          no-tag-max-width
        />
或:
        <tags
          input-tag-list="{{curBookInfo.tags}}"
          book-difficulty="{{curBookInfo.grading.difficulty}}"
        />
即:
是否传递参数no-tag-max-width本身,表示该参数是True还是False
而出现了该参数的话,参数后面的值,对于Boolean来说,就忽略掉了,都表示true
【总结】
经过一番调试后,最终用:
组件tags中定义了变量noTagMaxWidth:
components/tags/tags.js
// components/tags/tags.js
const app = getApp() //获取应用实例
const util = require('../../utils/util.js')
const book_common = require('../../utils/book_common.js')

Component({

  /**
   * 组件的属性列表
   */
  properties: {
    ...
    noTagMaxWidth: {
      type: Boolean,
      value: false,
      observer: function (newNoTagMaxWidth, oldNoTagMaxWidth, changedPath) {
        console.log("useExtraStyle observer: newNoTagMaxWidth=%s, oldNoTagMaxWidth=%s, changedPath=%o",
          newNoTagMaxWidth, oldNoTagMaxWidth, changedPath)

        if (newNoTagMaxWidth) {
          this.setData({
            tagNormalStyle: "tag_normal",
          })
        } else {
          this.setData({
            tagNormalStyle: "tag_normal tag_max_width",
          })
        }

        console.log("this.data.tagNormalStyle=%s", this.data.tagNormalStyle)
      }
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    highlightTagList: [],
    normalTagList: [],
    tagNormalStyle: "tag_normal tag_max_width"
  },
...
})
在其他普通的调用
  • 主页页的搜索结果列表
  • 详情页推荐列表
中,没有传递Boolean参数:no-tag-max-width
components/book_list/book_list.wxml
        <tags
          input-tag-list="{{curBookItem.tags}}"
          book-difficulty="{{curBookItem.grading.difficulty}}"
          highlight-tag="{{highlightTag}}"
        />
则都是正常的效果:
当iPhone X时,长tag时,带最大宽度,所以截断不换行:
而对于详情页的信息中的tags,传递了参数:no-tag-max-width
pages/detail/detail.wxml
      <view class='detail_item_tags'>
        <tags
          input-tag-list="{{curBookInfo.tags}}"
          book-difficulty="{{curBookInfo.grading.difficulty}}"
          no-tag-max-width
        />
      </view>
则就可以通过js中的noTagMaxWidth的observer去设置为:
tag_normal
而不带:tag_max_width
-》从而在详情页宽度足够的情况下,不会被由于最大宽度而截断,而可以显示完整了:

转载请注明:在路上 » 【已解决】小程序中给组件tags传递Boolean参数控制是否使用特殊样式

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
83 queries in 0.105 seconds, using 20.51MB memory