微信小程序之组件样式在不同页面的变换

微信小程序之组件样式在不同页面的变换

在开发微信小程序时，就如同封装函数一样会把重复用到的一部分代码使用组件来完成，这样一个组件可以在不同的页面进行使用，节省了很多时间和代码。
但是在有些情况下同一个组件在不同页面使用中会呈现不同的样式，这种时候就需要一个选择器进行多种样式的定义。
前几天在制作一个搜索框时就遇到了这种情况：同一个组件在两个页面使用，但是如果使用同一个选择器进行样式定义那么只有组件上的样式会生效（我也不知道是不是我使用不当的原因），所以我就想了另外一种解决方式——定义不同的class选择器。

在组件中声明选择器名字：

组件.wxml

<view class='{{navSearch}}{{two}}' bindtap='jumpFn'>
      <icon type='search' size='15' class='{{icn}}'></icon>
      <input placeholder='搜索'  class='{{search}}{{three}}'></input>
</view>

把声明过的选择器的样式在组件中定义（每一个）：

组件.wxss

.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>

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

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