First, the idea of implementation

Ii. Works List page

1. Implementation code

WXML code

<! --index.wxml-->
<view class="first_tab">
<! -- Merchandise -->
<navigator class="goods_item" wx:for="{{goodList}}" wx:key="id" >
  <! -- Left image container -->
  <view class="goods_img_wrap">
    <image mode="widthFix" width="70%" src="{{item.url}}">
    </image>
  </view>
  <! -- Right title and Introduction -->
  <view class="goods_info_wrap">
    <view class="goods_name">{{item.name}}</view>
  </view>
</navigator>
</view>
Copy the code

WXSS code

This article uses less to write styles, WXSS files are automatically generated by less extension, you need to install less extension first, see:

 .first_tab{
  .goods_item{
    display: flex;
    border-bottom: 5rpx solid #ccc;
    .goods_img_wrap{
      flex:1;
      display:flex;
      justify-content: center;
      align-items: center;
      margin: 20rpx;
      image{
        width: 80%}}.goods_info_wrap{
      flex:1;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .goods_name{}}}}Copy the code

Js code

Define item data in js code data:

// List of commodity object urls
goodList:[
  {
    id:0.url:"xxx".name: "Title"}, {id:1.url:"xxx".name: "Title"}, {id:2.url:"xxx".name: "Title"}, {id:3.url:"xxx".name: "Title"}, {id:4.url:"xxx".name: "Title"}, {id:5.url:"xxx".name: "Title"}, {id:6.url:"xxx".name: "Title"}, {id:7.url:"xxx".name: "Title",}],Copy the code

2. Realize the effect

3. Click to jump to the details page of the work

1. The page is displayed without passing parameters

First create the product details page:



Set the jump link in the navigation bar of the commodity list:



Jump effect:

2. Go to the page and pass parameters

Modify the code to pass the commodity ID parameter to the jump page:



Then,Add logging to the JS code of the product details page, print the product ID obtained on the page:

/** * lifecycle function -- listens for page loading */
onLoad: function (options) {
  const {goods_id} = options;
  console.log(goods_id);
},
Copy the code

When clicking on the item list, the console prints out the obtained item ID:

4. Implementation of the detail page of the work

1. Implementation code

Json code

Set the title of the product details page:

{
  "usingComponents": {},
  "navigationBarTitleText":"Details of Work"
}
Copy the code

WXML code

<! --pages/goods_detail/goods_detail.wxml-->
<view class="goods_detail">
    <! -- Image container -->
    <view class="goods_img_wrap">
    <image mode="aspectFill" src="{{goods_info.goods_img}}">
    </image>
  </view>
  <! -- Lower title and Introduction -->
  <view class="goods_info_wrap">
    <view class="goods_name">{{goods_info.goods_name}}</view>
    <view class="goods_brief">{{goods_info.goods_brief}}</view>
  </view>
</view>
Copy the code

WXSS code

This article uses less to write styles, WXSS files are automatically generated by less extension, you need to install less extension first, see:

Create the goods_detail.less file.

 .goods_detail{
  .goods_img_wrap{
    width: 100%;
    image {
      width: 100%; }}.goods_info_wrap{
    .goods_name{
      border-bottom: 5rpx solid #ccc;
      font-size: 24px;
      margin-left: 30rpx;
      margin-right: 30rpx;
      color: red;
    }
    .goods_brief{
      margin-left: 30rpx; }}}Copy the code

Js code

Commodity data is defined in data of JS code. In order to realize dynamic pull data, commodity data is defined as an object here:

/** * initial data for the page */
data: {
  goods_info: {
    goods_id: 1.goods_img: "http://mculover666.cn/twkk/20210525/6D7kegtd8e5B.jpg".goods_name: "Title".goods_brief: "Introduction"}},Copy the code

2. Realize the effect