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

  width: 100%;

  height: 100px;

  display: flex;

  box-sizing: border-box;

  /* 如果是网页开发 需要写一个物理像素 */

  border-bottom:1rpx solid #ccc;

}

/* gulp */

.prolist .proitem itemimg {

  width:100px;

  height: 100px;

}

.prolist .proitem .itemimg image {

  width: 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}`

      // })

    }

  }

})

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

{

  "navigationBarBackgroundColor": "#ff4001",

  "navigationBarTitleText":"首页",

  "navigationBarTextStyle":"white",

  "backgroundColorTop":"#efefef",

  "enablePullDownRefresh": true,

  "onReachBottomDistance":50,

  "disableScroll":false,

  "usingComponents": {

    "prolist":"/component/prolist/proplist"

  }

}