小程序---navigator

在小程序里面，实现一个点击跳转事件，通常会用上bindtap,再在事件里使用wx.navigateTo。但如果我们的页面是一个渲染的列表，每个项都有一个跳转事件，而且跳转进去的页面大体相同，那除了给它们一个个加上bindtap以外，还有什么更好的办法呢？
下面我将实现一个类似功能的页面，其中navigator 的url属性就是重头戏啦！

 <view class='medicine_con'>
    <block>
      <navigator class='medicine' wx:for='{{medicineRecords}}'  style="border-bottom:{{item.isLast?'none':'1rpx solid #e6e6ea'}}" wx:key="id" url="medicine_detail/medicine_detail?objectId={{item.objectId}}">
        <image src='{{item.image}}' class='medicine_pic'></image>
        <view class='medicine_text'>
          <text class='medicine_title'>{{item.title}}</text>
          <text class='medicine_refer_num'>{{item.medicine_refer_num}}</text>
          <text class='medicine_function'>{{item.medicine_function}}</text>
        </view>
      </navigator>
    </block>
  </view>

.medicine_con {
  float: left;
  width: 100%;
  height: auto;
  background-color: white;
  border-top: 1rpx solid #e6e6ea;
  border-bottom: 1rpx solid #e6e6ea;
}

.medicine {
  float: left;
  width: 100%;
  height: auto;
  background-color: white;
  border-bottom: 1rpx solid #e6e6ea;
  margin: 0 0 0 30rpx;
}

.medicine_pic {
  float: left;
  width: 20%;
  height: 150rpx;
  margin: 35rpx 0 30rpx 5rpx;
}

.medicine_text {
  float: left;
  width: 72%;
  height: auto;
}

.medicine_title {
  float: left;
  font-size: 35rpx;
  color: #000;
  font-weight: 570;
  margin: 30rpx 0 0 25rpx;
}

.medicine_refer_num, .medicine_function {
  float: left;
  font-size: 27rpx;
  color: #999;
  margin: 10rpx 0 0 25rpx;
}

.medicine_function {
  margin: 0 0 0 25rpx;
}

data里面:
  medicineRecords: [
      {
        image: '../../images/product_pic/p4.PNG',
        title: '口炎清颗粒',
        medicine_refer_num: '[批准文号]国药准治Z44021730',
        medicine_function: '[功能主治]滋阴清热，解毒消肿。用于阴虚火旺所致的口腔炎症。',
        isLast: false,
        id: 1
      },
      {
        image: '../../images/product_pic/p4.PNG',
        title: '口炎清颗粒',
        medicine_refer_num: '[批准文号]国药准治Z44021730',
        medicine_function: '[功能主治]滋阴清热，解毒消肿。用于阴虚火旺所致的口腔炎症。',
        isLast: false,
        id: 2
      },
      {
        image: '../../images/product_pic/p4.PNG',
        title: '口炎清颗粒',
        medicine_refer_num: '[批准文号]国药准治Z44021730',
        medicine_function: '[功能主治]滋阴清热，解毒消肿。用于阴虚火旺所致的口腔炎症。',
        isLast: false,
        id: 3
      },
      {
        image: '../../images/product_pic/p4.PNG',
        title: '口炎清颗粒',
        medicine_refer_num: '[批准文号]国药准治Z44021730',
        medicine_function: '[功能主治]滋阴清热，解毒消肿。用于阴虚火旺所致的口腔炎症。',
        isLast: false,
        id: 4
      },
      。。。。。
      ]

效果如下：
页面列表

每一项点击，就会跳转到一个新页面。