微信小程序 （组件的使用）

创建组件

在根目录创建components目录，然后创建列表组件

组件中内容

<view class="prolist">
　　　　//循环prolist列表 
      <view class="proitem" data-proid="{{item.proid}}" bindtap="toDetail" wx:for="{{prolist}}" wx:key="item.proid">
      <view class="itemimg">
         <image src="{{item.proimg}}"></image>
      </view>
      <view class="iteminfo">
        <view class="title">{{item.proname}}</view>
        <view class="price">￥{{item.price}}</view>
      </view>
      </view>
    
</view>

/* component/prolist/proplist.wxss */
/* .ul .li {
  height: 50px;
} */
.prolist{
  position: relative;
}
.prolist .proitem {
   100%;
  height: 100px;
  display: flex;
  box-sizing: border-box;
  /* 如果是网页开发 需要写一个物理像素 */
  border-bottom:1rpx solid #ccc;
}
/* gulp */
.prolist .proitem itemimg {
  100px;
  height: 100px;

}

.prolist .proitem .itemimg image {
   90px;
  height: 90px;
  border: 1px solid #ccc;
  margin: 5px;
}
.prolist .proitem .iteminfo{
  flex:1;
  padding: 3px 5px;
}

在组件属性列表中接收，在组将方法中完成跳转页面

// component/prolist/proplist.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    prolist: Array
  },

  /**
   * 组件的初始数据
   */
  data: {
    // Aarry:[]
  },

  /**
   * 组件的方法列表
   */
  methods: {
    toDetail (event) {
      console.log("去详情页面",event)
      // const { proid } = event.currentTarget.dataset
      const { currentTarget: { dataset:{proid}}}=event
      //如果跳转的是tab页面可以使用 switchTsb 或者 reluanch
      //如果跳转的是非tab页面 使用redirectTo或者 navigateTo reluanch

      wx.navigateTo({
        url: `/pages/detail/detail?proid=${proid}`,
      })

      // wx.redirectTo({
      //   url: `/pages/detail/detail?proid=${proid}`,
      // })

      // wx.reLaunch({
      //   url: `/pages/detail/detail?proid=${proid}`
      // })
    }
  }
})

引入组件

a:在父组件index.wxml中引入组件

<prolist prolist="{{prolist}}"></prolist>

b:在index.json中注册组件

{
  "navigationBarBackgroundColor": "#ff4001",
  "navigationBarTitleText":"首页",
  "navigationBarTextStyle":"white",
  "backgroundColorTop":"#efefef",
  "enablePullDownRefresh": true,
  "onReachBottomDistance":50,
  "disableScroll":false,

  
  "usingComponents": {
    "prolist":"/component/prolist/proplist"
  }
}

完成图