微信小程序组件小案例---个人中心

效果图

页面

<!--pages/com/com.wxml-->
<!-- props传参 -->
<!-- 安全设置 -->
<cell 
title="安全设置"
note="手机号/密码"
>
</cell>
<!-- 通用 -->
<cell 
cell-class="mycell"
title="通用"
>
</cell>
<!-- 首页 -->
<cell 
url="/news/pages/article/article"
title="首页"
icon="/images/home.png"
>
</cell>
<!-- 我的-->
<cell 
title="我的"
icon="/images/me.png"
>
</cell>
<!-- 听筒模式-->
<cell 
title="听筒模式"
toggle="{{true}}"
bindch="chang"
>
</cell>
<!-- 搜索-->
<cell 
title="搜索"
>
  <icon slot="iconright" size="20" type="search"></icon>
</cell>
<!-- 通知-->
<cell url="/pages/logs/logs">
  <view slot="title"><text>通知</text><text class="dot"></text></view>
</cell>
<!-- 优惠-->
<cell url="/pages/logs/logs">
  <view slot="title"><text>优惠</text><text class="com">10元优惠劵</text></view>
</cell>

页面js

chang(e){
    // console.log(e,"11111")
    let msg=e.detail.value?'开启':'关闭'
      wx.showToast({
        title: '听筒模式已'+msg,
      })
    
  },

页面css

/* pages/com/com.wxss */
.mycell{
  height: 100rpx !important;
  color:red !important;
}
.dot{
  display: inline-block;
  width: 15rpx;
  height: 15rpx;
  border-radius: 50%;
  background-color: red;
  margin-left: 10rpx;
}
.com{
  display: inline-block;
  width: 150rpx;
  height: 40rpx;
  line-height: 40rpx;
  text-align: center;
  background-color: orange;
  color: #ffffff;
  margin-left: 10rpx;
  border-radius: 4rpx;
}

组件页面

<view class="cell cell-class" bindtap="changeHd">
  <view class="icon">
    <image mode="widthFix" wx:if="{{icon!=''}}" src="{{icon}}"/>
  </view>
  <view class="content">
  <!-- 如果传title就显示-->
    <view wx:if="{{title}}" class="title">{{title}}</view>
    <!-- 否则就是slot内容-->
    <slot wx:else name="title"/>
    <view class="tip">
      <view class="note">{{note}}</view>
      <view wx:if="{{toggle}}" class="toggle">
        <switch bindchange="toggleChange"></switch>
      </view>
      <view wx:else>
      	<!--如果传过来的有url就显示箭头-->
        <view class="arrow" wx:if="{{url}}"></view>
        <!--否则就显示图标-->
        <slot name="iconright" wx:else class="iconright"/>
      </view>
    </view>
  </view>
</view>

组件js

Component({
  options:{
    multipleSlots:true,
    //多个插槽
    // styleIsolation:'isolated',
    //样式隔离
    //isolated
    //apply-shared页面样式可分享到组件
    //shared双向共享
   
  },
  externalClasses:["cell-class"],
   /**
     * 1.定义外部类
     * 2.组件中使用外部类
     * 3.页面中传入外部类
     * 4.定义外部了样式
     */
    //可以定义外部组件，class在组件内使用
  /**
   * 组件的属性列表
   */
  properties: {
    title:{type:String,value:''},
    note:{type:String,value:''},
    icon:{type:String,value:''},
    url:{type:String,value:''},
    toggle:{type:Boolean,value:false}
    //定义title的类型和默认值
  },

  /**
   * 组件的初始数据
   */
 

  /**
   * 组件的方法列表
   */
  methods: {
    changeHd(){
      console.log(this.data.url)
      if(this.data.url){//如果不为空就跳转到对应页面
        wx.navigateTo({
          url:this.data.url,
        })
      }
    },
    toggleChange(e){
      // console.log(e)
      this.triggerEvent("ch",{value:e.detail.value})
      //发送时间名称chang值为e.detail.value
    }
  }
})

.cell{
  display: flex;
  height: 88rpx;
  background-color: #ffffff;
  border-bottom: 1rpx solid #f0f0f0;
}
.cell .icon{
  display: flex;
  align-items: center;
  margin-left: 30rpx;
}
.cell .icon image{
  width: 40rpx;
  height: 40rpx;
}
.cell .content{
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* margin-left: 30rpx; */
}
.tip{
  display: flex;
  padding-right: 30rpx;
}
.arrow{
  height: 26rpx;
  width: 26rpx;
  border-top: 1rpx solid #ddd;
  border-right: 1rpx solid #ddd;
  transform: rotate(45deg) translate(0,13rpx);
  margin-left: 30rpx;
}
.note{
  font-size: 28rpx;
  color: #999;

}