小程序从分类页跳转到详情页的实现

小程序中从分类页跳转到详情页是否与vue项目中的方法一样呢？让我们一起来看看在小程序中是如何实现的吧（继上篇分类页的实现）。

$重难点：数据（参数）的传递与接收$

先看效果图：

详情页的相关代码如下所示：

detail.wxml文件

<!--pages/detail/detail.wxml-->
<view class='detail'>
  <swiper 
      indicator-dots="{{indicatorDots}}"
      autoplay="{{autoplay}}" 
      interval="{{interval}}" 
      duration="{{duration}}"
      circular="{{circular}}"
      class='swiper'>
      <block wx:for="{{imgUrls}}" wx:key >
        <swiper-item>
          <image wx:if='{{hadImage}}' src="{{item.imgUrl}}" class="slide-image" />
        </swiper-item>
      </block>
  </swiper>
<view class='detailTo'>
  <view class='detailName'>{{detailName}}</view>
  <view class='desc'>{{desc}}</view>
  <view class='detailPrice'>￥{{detailPrice}}</view>
  <view class='detailCount'>
    <view class='add' bindtap='handleAdd'>+</view>
    <view class='detailNum'>{{goodsNum}}</view>
    <view class='redus' bindtap='handleRedus'>-</view>
  </view>
</view>
 <view class='detailBottom'>
  <button class='addBtn' type='primary' bindtap='handleCart'>加入购物车</button>
  <button class='buyBtn' type='warn'>立即购买</button>
 </view> 
</view>

detail.js文件

// pages/detail/detail.js
// var jsonData=require("../data/detailData.js")
Page({

  /**
   * 页面的初始数据
   */
  data: {
    indicatorDots: true,
    autoplay: true,
    circular:true,
    interval: 3000,
    duration: 1000,
    //初始化详情页开始显示的数量
    goodsNum:1
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // console.log(options)
    //先获取上个页面传递过来的数据
    var detailId = options.id;
    var detailName=options.name;
    var desc=options.desc;
    var detailPrice=options.price;
    var detailImage=options.image;
    //将获取到的路径以，截取出来
    var imgUrls = options.imgUrls.split(',');
    var imgArray=[];
    var hadImage = false;
     // 循环所有的图片路径，图片不为空则存到数组imgArray中
    for (var i = 0; i < imgUrls.length;i++){
      if (imgUrls[i] != "undefined") {
        var obj = {
          imgUrl: imgUrls[i],
        }
        imgArray.push(obj);
      }
    }
    //判断是否有图片
    if (imgArray.length>0){
      hadImage=true;
    }else{
      hadImage=false;
    }
    //列表页面传递的数据
    this.setData({
      detailId: detailId,
      detailName: detailName,
      desc:desc,
      detailPrice: detailPrice,
      detailImage: detailImage,
      imgUrls: imgArray,
      hadImage: hadImage
    })
  },
  handleAdd(){
    var goodsCount=this.data.goodsNum+1;
    this.setData({
      goodsNum:goodsCount
    })
  },
  handleRedus(){
    var goodsCount=this.data.goodsNum-1;
    if (goodsCount<1){
      wx.showToast({
        title: '再不能减啦?',
      })
      return;
    }
    this.setData({
      goodsNum: goodsCount
    })
  },
  //此处是加入购物车用的（本节尚未用到）
  handleCart(){
    wx.navigateTo({
      url: '../shoppingCart/shoppingCart?goodsNum=' + this.data.goodsNum + '&detailName=' + this.data.detailName + '&detailPrice=' + this.data.detailPrice + '&detailImage=' + this.data.detailImage,
    })
  }
})

更新后的分类页主要代码

在上篇分类页实现的文件中更新了wxml文件，js文件并未改动，所以在下面只展示wxml文件。

wxml文件

<view class="main">
  <view class="categroy-left">
   <!-- 当前项的id等于item项的id或者当前的下标等于item的下标时，那个就是当前状态- -->
       <view wx:for="{{category}}" wx:key="index" data-id="{{item.id}}" data-index="{{index}}"
           bindtap="switchTab"
           class="cate-list {{curIndex === index?'active':''}}">{{item.name}}
       </view>
   </view>

   <scroll-view class="categroy-right" scroll-y           scroll-into-view="{{toView}}" scroll-with-animation="true">
     <view wx:if="{{category[curIndex].isChild}}">
       <block wx:for="{{category[curIndex].children}}" wx:for-index wx:key="idx">
        <navigator url='../detail/detail?id={{item.child_id}}&name={{item.name}}&price={{item.price}}&imgUrls={{item.imgUrls}}&desc={{item.desc}}&image={{item.image}}' class='naviga' hover-class="none">
          <view class="cate-title">
            <image wx:if="{{item.image}}" src='{{item.image}}'></image>
            <view class='detailText'>
              <text class='name'>{{item.name}}</text>
              <text class='price'>￥{{item.price}}</text>
            </view>
            
          </view>
        </navigator>
       </block> 
     </view>
      <!-- 若无数据，则显示暂无数据 -->
      <view class='nodata' wx:else>该分类暂无数据</view>
   </scroll-view>
</view>

为了减少代码量，博主就将wxss文件内容省略了，若有想用的请在下面留言哦❤️❤️❤️