html52.com
我爱小程序-开发者交流社区

关于微信小程序样式表加载顺序说明

问题模块
API和组件


如果您的样式表,是通过import方式导入的,那么加载顺序相对于 本页面的wxss文件是要在其之后的.

也就是说  当前页面的 wxss文件的渲染速度(或者说hidden属性样式)> 外部引入的wxss文件的渲染速度 .这个在开发之中是需要注意的,尤其是你引用

[hidden]属性,来隐藏或者显示元素 ,如果采用外部引入的方式,那么请一定要注意,view[hidden]可能会失效

比如:

<view class='list-item' hidden='{{true}}'>

   <view class='item-btn color-a9a9a9'>取消预约view>

   <view class='item-btn color-ed5965'>立即支付view>

view>

这一段代码,这是页面效果显示

这一段代码,这是页面效果显示可以看出该元素并未隐藏

可以看出该元素并未隐藏

调试查看 wxml ,可以看到渲染顺序,如下图

从图中可以看出,.view[hidden]的属性失效了,这就是这个渲染先后问题所导致的.大家在开发过程中应避免这种情况的发生.从图中可以看出,.view[hidden]的属性失效了,这就是这个渲染先后问题所导致的.大家在开发过程中应避免这种情况的发生.

网友回复

星野 純夏:

回答四楼,可能您所说的和我所描述的存在误差,我这里所说的是同一个元素,并不存在是你说的这种因素导致。当然由于您的解说,我特意又进行了一次测试,总算可以把问题描述清楚了。

比如存在一个demo目录,底下有 demo.js,demo.json,demo.wxml,demo.wxss等文件,同时还有一个外部样式文件.base.wxss(这也就是我们所引入到demo 页面中的样式)

-- 页面样式的组成 为:

小程序工程中的app.wxss+base.wxss+demo.wxss(且顺序也是如此顺序的)

---hidden属性

-- demo.wxml 文件代码

     1. 当hidden属性为false时,且 view 样式存在隐藏样式,hidden属性选择器失效

        <view  hidden='{{false}}'>

内容内容内容内容内容内容内容内容

        </view>

  -- demo.wxss 文件代码

      view {

          background: red;

         display: none;

}

2. 当hidden属性为true时,view中样式display:no失效。

以上解说,对于隐藏属性,一般在实际开发过程中也不会设置两个开关的情况,这种情况也应该是避免了,但是如果你是使用的情况,那么以上解说说不定可以帮助到你。


另:我问题中所提出的观点,存在错误,希望大家看这里评论就OK.如果还有什么解释不到位,或者解说错误的地方,欢迎修正








Z:

这是因为后代选择器的优先级高于标签选择器造成的

赵子龙:

大神啊

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

真正的个人免签约支付接口

云免签H5支付