折腾:
【已解决】绘本查询小程序的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的话:
“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 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
-》从而在详情页宽度足够的情况下,不会被由于最大宽度而截断,而可以显示完整了:
