Wechat small program learning notes (iii) - homepage and details page development

First, common components

In the previous section, we explained the module that encapsulates the request data, where the data is requested for a multicast graph

1. Request and render the round-robin map data of the home page

Pages /home/home.js

import { request } from '. /.. /.. /utils/index.js'
Page({

  /** * initial data for the page */
  data: {
    bannerlist: []},/** * lifecycle function -- listens for page loading */
  onLoad: function (options) {
    request('/api/pro/banner').then(data= > {
      console.log(data)
      // How wechat applets modify data
      this.setData({
        bannerlist: data.data
      })
    })
  },
})
Copy the code

2 Use Component – View Container – swiper

Slider view container. Only Swiper-Item components can be placed, otherwise undefined behavior will result. The property sheet is as follows

To see the effect, enter the following code in the pages/home/home. WXML file

<! --pages/home/home.wxml--><swiper
  indicator-dots="{{true}}" autoplay="{{true}}" circular="{{true}}" 
  duration="{{500}}">
  <block wx:for="{{bannerlist}}" wx:key="index">
    <swiper-item >
      <image src="{{'http://daxun.kuboy.top' + item}}"></image>
    </swiper-item>
  </block>
</swiper>
<prolist></prolist>
Copy the code

Custom component-product list

1. Customize the layout of components

components/prolist/prolist.wxml

<view class="prolist">
  <view class="proitem">
    <view class="itemimg">
      <image class="img" src=""></image>
    </view>
    <view class="iteminfo">
      <view class="title">The product name</view>
      <view class="price">RMB 199</view>
    </view>
  </view>
</view>
Copy the code

2. Customize the style of the component

components/prolist/prolist.wxss

/* components/prolist/prolist.wxss */
.prolist .proitem{
  width: 100%;
  display: flex;
  height: 100px;
  box-sizing: border-box;
  border-bottom: 1px solid #ccc;
}

.prolist .proitem .itemimg{
  width: 100px;
  height: 100px;
  padding: 5px;
}

.prolist .proitem .itemimg .img{
  width: 90px;
  height: 90px;
  box-sizing: border-box;
  border: 1px solid #ccc;
}

.prolist .proitem .iteminfo {
  padding: 3px;
}

.prolist .proitem .iteminfo .title{
  font-size: 18px;
  font-weight: bold;
}

.prolist .proitem .iteminfo .price{
  font-size: 12px;
}

Copy the code

3. The home page requests the data and passes it to the child components

pages/home/home.js

import { request } from '. /.. /.. /utils/index.js'
Page({

  /** * initial data for the page */
  data: {
    prolist: []},/** * lifecycle function -- listens for page loading */
  onLoad: function (options) {
    request('/api/pro').then(data= > {
      console.log(data)
      // How wechat applets modify data
      this.setData({
        prolist: data.data
      })
    })
  },
})
Copy the code

pages/home/home.wxml

<prolist prolist="{{prolist}}"></prolist>
Copy the code

4. Sub-components receive data

components/prolist/prolist.js

Component({
  /** * Component property list */
  properties: {
    prolist: Array}})Copy the code

5. Subcomponents render data

components/prolist/prolist.wxml

<view class="prolist">
  <view class="proitem" wx:for="{{prolist}}" wx:key="item.proid">
    <view class="itemimg">
      <image class="img" src="{{item.proimg}}"></image>
    </view>
    <view class="iteminfo">
      <view class="title">
        {{item.proname}}
      </view>
      <view class="price">${{item. Price}}</view>
    </view>
  </view>
</view>
Copy the code

Three, the implementation of pull-down refresh pull-up loading

1. Enable the drop-down refresh function on the home page

pages/home/home.json

{
  "usingComponents": {
    "prolist": "/components/prolist/prolist"
  },
  "enablePullDownRefresh": true."backgroundColor": "#efefef"."backgroundTextStyle": "dark"
}
Copy the code

2. Improve the relevant drop-down refresh function

pages/home/home.js

// pages/home/home.js
import { request } from '. /.. /.. /utils/index.js'
Page({

  /** * initial data for the page */
  data: {
    bannerlist: [].prolist: [].pageCode: 1 / / page
  },

  /** * lifecycle function -- listens for page loading */
  onLoad: function (options) {
    request('/api/pro/banner').then(data= > {
      console.log(data)
      this.setData({
        bannerlist: data.data
      })
    })

    request('/api/pro').then(data= > {
      console.log(data)
      this.setData({
        prolist: data.data
      })
    })
  },

  /** * page-related event handlers -- listen for user pull actions */
  onPullDownRefresh: function () {
    request('/api/pro').then(data= > {
      console.log(data)
      this.setData({
        prolist: data.data,
        pageCode: 1})})},/** * the handler for the pull-down event on the page */
  onReachBottom: function () {
    let num = this.data.pageCode;
    let prolist = this.data.prolist
    num++;
    console.log(num)
    request('/api/pro', {
      pageCode: num
    }).then(data= > {
      // Note the threshold change here -- no data
      this.setData({
        prolist: [...prolist, ...data.data],
        pageCode: num
      })
    })
  }
})
Copy the code

Pull up pull down test

Four, return to the top function implementation

Set a fixed location button on the home page, then bind the click event, bind the event using Bindtap, then call the API provided by the applet to return

// pages/home/home.wxml
<view class="backtop" bindtap="backtop"> write < / view >// pages/home/home.wxss
.backtop {
  position: fixed;
  bottom: 10px;
  right: 8px;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  background-color: rgba(0.0.0.0.5);
  font-size: 18px;
  text-align: center;
  line-height: 30px;
}

// pages/home/home.js
Page({
  /** * custom function */
  backtop: function () {
    // Applet API interface - scroll
    wx.pageScrollTo({
      scrollTop: 0.duration: 300})}})Copy the code

5. Click the product list to enter the product details page

1. Create a detail page

app.json

"pages": [
  "pages/detail/detail"].Copy the code

2. Declarative navigation jump

Use the applet component – navigation – Navigator

Page links.

Legal values for open-type – explained in more detail in programmatic navigation

// components/prolist/prolist.wxml
<view class="prolist">
  <navigator url="{{'/pages/detail/detail? proid=' + item.proid}}" wx:for="{{prolist}}" wx:key="item.proid">
    <view class="proitem" >
      <view class="itemimg">
        <image class="img" src="{{item.proimg}}"></image>
      </view>
      <view class="iteminfo">
        <view class="title">
          {{item.proname}}
        </view>
        <view class="price">${{item. Price}}</view>
      </view>
    </view>
  </navigator>
</view>
Copy the code

3. The details page receives and renders data

// pages/detail/detail.js
import { request } from '. /.. /.. /utils/index.js';
Page({

  /** * initial data for the page */
  data: {
    proid: ' '.proname: ' '.proimg: ' '
    price: 0
  },

  /** * lifecycle function -- listens for page loading */
  onLoad: function (options) {
    // options are received parameters
    const { proid } = options
    request('/api/pro/detail? proid=' + proid).then(data= > {
      console.log(data.data)
      const { proid, proname, price, proimg} = data.data
      this.setData({
        proid, proname, price, proimg
      })
    })
  }
})

// pages/detail/detail.wxml

<image src="{{proimg}}" style="width: 100px; height: 100px;"></image>
<view>{{proname}}</view>
<view>${{price}}</view>

Copy the code

Click on different products to test

4. Programmatic navigation rendering

The API provided by the small program is used to realize the jump of programmatic routing

wx.switchTab(Object object)

Jump to the tabBar page and close all other non-Tabbar pages

wx.reLaunch(Object object)

Close all pages and open to a page within the app

wx.redirectTo(Object object)

Close the current page and switch to a page in the application. However, jumping to the Tabbar page is not allowed

wx.navigateTo(Object object)

Keep the current page and go to a page in the application. But you cannot jump to the Tabbar page. Use wx.navigateBack to return to the original page. The page stack in the applets is up to ten layers

wx.navigateBack(Object object)

Close the current page and return to the previous page or multi-level page. You can use getCurrentPages to get the current page stack and determine how many layers you need to return

Applets pass data in the form of data-params, which can be retrieved in the event according to the event

// components/prolist/prolist.wxml
<view class="prolist">
  <view class="proitem" bindtap="toDetail" data-proid="{{item.proid}}" wx:for="{{prolist}}" wx:key="item.proid">
    <view class="itemimg">
      <image class="img" src="{{item.proimg}}"></image>
    </view>
    <view class="iteminfo">
      <view class="title">
        {{item.proname}}
      </view>
      <view class="price">${{item. Price}}</view>
    </view>
  </view>
</view>

// components/prolist/prolist.js
Component({
  /** * Component property list */
  properties: {
    prolist: Array
  },

  /** * The initial data of the component */
  data: {},/** * list of component methods */
  methods: {
    toDetail (event) {
      const { proid } = event.currentTarget.dataset
      wx.navigateTo({
        url: '/pages/detail/detail? proid=' + proid
      })
    }
  }
})
Copy the code

More recommended

Wechat small program learning notes (2) – the framework of development
Wechat applets learning Notes (1) — Understand wechat applets

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Wechat small program learning notes (iii) – homepage and details page development

First, common components

1. Request and render the round-robin map data of the home page

Pages /home/home.js

2 Use Component – View Container – swiper

Custom component-product list

1. Customize the layout of components

2. Customize the style of the component

3. The home page requests the data and passes it to the child components

4. Sub-components receive data

5. Subcomponents render data

Three, the implementation of pull-down refresh pull-up loading

1. Enable the drop-down refresh function on the home page

2. Improve the relevant drop-down refresh function

Four, return to the top function implementation

5. Click the product list to enter the product details page

1. Create a detail page

2. Declarative navigation jump

3. The details page receives and renders data

4. Programmatic navigation rendering

More recommended

Wechat small program learning notes (iii) – homepage and details page development

First, common components

1. Request and render the round-robin map data of the home page

Pages /home/home.js

2 Use Component – View Container – swiper

Custom component-product list

1. Customize the layout of components

2. Customize the style of the component

3. The home page requests the data and passes it to the child components

4. Sub-components receive data

5. Subcomponents render data

Three, the implementation of pull-down refresh pull-up loading

1. Enable the drop-down refresh function on the home page

2. Improve the relevant drop-down refresh function

Four, return to the top function implementation

5. Click the product list to enter the product details page

1. Create a detail page

2. Declarative navigation jump

3. The details page receives and renders data

4. Programmatic navigation rendering

More recommended

Related Posts

The way components communicate that are not commonly used in Vue

Incredible pure CSS scrolling progress bar effect

Element framework to realize the business logic of background management system (login page)