用额外的cover-view做边框也行, .top-line { height: 2px; position: absolute; top: 0; left: 0; right: 0; background-color: #eee; }
cover-view单独设置某一方向的border样式无效cover-view组件的border在真机上(华为 荣耀8)无法为某一方向单独设置样式,开发者工具上正常。 如下示例代码: view和cover-view设置同样的class,样式中border-top设置为2rpx solid red,border-bottom设为none,但在真机上cover-view组件的所有border都应用了2rpx solid red。 wxml: [代码]<[代码][代码]view[代码] [代码]class[代码][代码]=[代码][代码]"intro"[代码][代码]>欢迎使用代码片段,可在控制台查看代码片段的说明和文档</[代码][代码]view[代码][代码]>[代码][代码]<[代码][代码]cover-view[代码] [代码]class[代码][代码]=[代码][代码]"intro"[代码][代码]>cover-view中的内容</[代码][代码]cover-view[代码][代码]>[代码] wxss: [代码].intro {[代码][代码] [代码][代码]margin[代码][代码]: [代码][代码]30px[代码][代码];[代码][代码] [代码][代码]text-align[代码][代码]: [代码][代码]center[代码][代码];[代码] [代码] [代码][代码]border-top[代码][代码]: [代码][代码]2[代码][代码]rpx [代码][代码]solid[代码] [代码]red[代码][代码];[代码][代码] [代码][代码]border-bottom[代码][代码]: [代码][代码]none[代码][代码];[代码][代码]}[代码] 真机效果: [图片]
2023-08-18