小程序组件样式在不同页面中变化

在设计小程序使用组件的时候，如果一个组件在不同的页面使用，并且样式还不同，那么两个页面就不要不同的css样式设计，比如说小程序的搜索标签以及跳转页面。
这种情况下如果在每个页面单独写样式是不能生效的（亲实验，我的不能生效），所以我的解决办法就是在组件页面把需要用到的样式都写出来，但是使用不同的选择器或者选择器名字不同，然后在每个页面传入不同的选择器名字，这样在不同页面组件的不同选择器名字就能生效了！

比如：搜索栏

组件页面

把页面铺设出来，同时定义不同的类选择器名字

<view class='{{navSearch}}{{two}}' bindtap='jumpFn'> //整个搜索栏，包括搜索图标和输入框
      <icon type='search' size='15' class='{{icn}}'></icon> //图标
      <input placeholder='搜索'  class='{{search}}{{three}}'></input> //搜索框
</view>

然后在组件的wxss界面写样式（所有需要的样式，包括搜索跳转过后页面的样式）

组件.wxss

.navTitle{
  background-color: #0DC52E;
  padding: 0px 10px 8px;
  /* 对搜索跳转界面的设置 */
  display: flex;
  justify-content: space-between;
  align-items: center
}
.navSearch{
  width: 100%;
  height: 25px;
  margin: 0px auto;
  background-color: white;
  border-radius: 3px;
  font-size: 12px;
  color: gainsboro;
  display: flex;
  justify-content: center;
  align-items: center;
}
.search{
  width: 25px;
}
/* 搜索跳转过后的view */
.two{
  width: 80%;
  height: 25px;
  background-color: white;
  border-radius: 3px;
  font-size: 12px;
  color: gainsboro;
  display: flex;
  align-items: center;
}
/* 搜索图标 */
.icn{
  margin: auto 10px;
}
/* input的宽度 */
.three{
  width: auto;
}

在组件的js中设置完每个数据的类型后，在需要引入组件页面的json文件中设置组件和页面的连接

主页面.json

{
  "usingComponents": {
    "se": "../../../components/navsearch/navsearch"
  }
}

然后就可以在传入界面设置数据了。

主页面

在主页面铺设时引入组件，同时在主页面或者js中把选择器的名字进行传值（需要和组件中的相同）

主页面.wxml

<!-- 添加组件，搜索栏 -->
  <se bindjump="jumpSearch" nav-title="navTitle" nav-search="navSearch" search="search" isjump="{{isjump}}"></se>

主页面的搜索框：

主页面

这个搜索点击跳转到另外一个搜索界面，而且搜索界面的样式和这个样式不同，所以此刻另外一个选择器名字就派上用场了。

点击跳转的搜索界面(引入和主页面json相同的文件，注意路径)

搜索界面.wxml

<view>
  <se bindjump="jumpSearch" nav-title="navTitle" two="two" three="three" icn="icn" isjump="{{isjump}}" bindquxiao="quxiao"></se>
</view>

因为引入的样式不同，所以这个页面的搜索框样式和主页面是不同的。

搜索页面

到这里，一个组件在不同页面中就有不同的样式啦！