This is the seventh day of my participation in the August More text Challenge. For details, see:August is more challenging

Mall home page production

Generally speaking, most of the traffic of e-commerce will go to the home page, so the home page is the most important part of the e-commerce system. A good home page will activate the user’s desire to buy.

On the home page, we mainly implement three functions: one is the navigation bar at the top, the second is the rotation diagram page in the top half, and the last is the product list recommendation page in the bottom half. To facilitate development, we need to determine the framework of the home page:

1. Design and implementation of the top navigation bar

The top navigation bar is not quite the same as the bottom navigation bar implemented in the previous article, which can be achieved with the help of the powerful configuration capabilities of small programs. The requirements of the navigation bar at the top are realized according to the requirements, that is, the navigation bar is designed and sorted according to the actual requirements.

The index WXML part

In index.wxml, we use the variable menuID to mark which menu we are currently under, and we use the bindtap() method to listen for events. We have event binding for each menu using the menuClick() method. Achieve the project navigation of each menu switch.

<view class="tabbar">
<view id="1" class="tabbox {{menuID==1? 'curbar':''}}" bindtap="menuClick">
<view class="tabico ico-recom {{menuID==1? 'cur-recom':''}}"></view>
<view class="tabtit {{menuID==1? 'curtit':''}}">Today's recommendation</view>
</view>.<view id="5" class="tabbox {{menuID==5? 'curbar':''}}" bindtap="menuClick">
<view class="tabico ico-flower {{menuID==5? 'cur-flower':''}}"></view>
<view class="tabtit {{menuID==5? 'curtit':''}}">A gift of flowers</view>
</view>
</view>
Copy the code

The index WXSS part

This part is about writing styles. As with page styles, we will not cover them here. Note that the WXSS file does not support using local resources.

.cur-flower{
  background: url('http://qxguzbs2m.hd-bkt.clouddn.com/%E9%B2%9C%E8%8A%B1%20%28%E8%93%9D%29.png') no-repeat;
  background-size: 100%;
}
Copy the code

Index. Js part

We give each view an ID. When the bindTap () binding event is triggered, the background engine passes a click event parameter e to the event function. The currentTarget event property returns the node whose listener triggered the event.

const app = getApp()

Page({
  data: {menuID: 1,},// Menu toggle listening
  menuClick(e) {
    var id = e.currentTarget.id;
    this.setData({
      menuID: id
    })
  }
})
Copy the code

There you have it, a simple top navigation bar. Take a look

In real development, the top navigation bar should not be statically written to the page like this. Instead, the top navigation data should be dynamically retrieved, stored in data, and simplified with the wx:for function.

2. Design and implementation of the rotation column

Swiper is an important part of e-commerce sites. Swiper has a built-in swiper component, which can be packaged to display the content of the swiper component. Now let’s complete a swiper component.

The index WXML part

<! -- The design and implementation of the rotation column -->
<swiper class="adbox" indicator-dots="{{indicatorDots}}"
 style="width: {{imagewidth}}px; height: {{imagewidth}}px;" 
 autoplay="{{autopaly}}"
 interval="{{interval}}"
 duration="{{duration}}"
 >
  <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image id="{{item.iTargetType}}{{item.sLink}}"
      style="width: {{imageWidth}}px; height: {{imageHeight}}px"
      src="{{item.sPicLink}}"
      class="slide-image"
      mode="aspectFit"
      data-gid="{{item.sLink}}"
      bindtap="bigImageClick"
      bindload="imageLoad"
      />
    </swiper-item>
  </block>
</swiper>
Copy the code

We use the variable GID to mark the product ID for the round, and we loop with wx:for, binding each image to the bigImageClick method.

The index WXSS part

.pagebox{
  width: 100%;
}
.page{
  width: 100%;
}
.adbox{
  width: 100%;
}
.slide-image{
  width: 100%;
  height: 141px;
}
Copy the code

The data portion of a round cast

You need to get the data from the round and bind it to the render layer

const app = getApp()

Page({
  data: {"imgUrls": [{
      "sPicLink": 'http://qxguzbs2m.hd-bkt.clouddn.com/14-3C%E6%95%B0%E7%A0%81.png'."sLink": "1000"}, {"sPicLink": 'http://qxguzbs2m.hd-bkt.clouddn.com/31-%E5%A5%B3%E8%A3%85-%E6%9C%8D%E9%A5%B0.png'."sLink": "1001"}},// The round play button clicks the event
  bigImageClick(e) {
    var p = e.currentTarget.dataset.grid
    wx.navigateTo({
      url: 'pages/detai/detail? id='+p
    })
  }
})
Copy the code

So, our rotation column is complete ~ let’s see the effect!

We did not put the pictures of the round broadcast in the small program project, but introduced them through CDN to ensure that the small program is “small” program. Wechat official has limits on the packages of small programs. All subcontracts cannot exceed 8MB, and the size of a single subcontract or main package cannot exceed 2MB.

3. Design and implementation of commodity recommendation

This part is essentially a list of goods display, do not include wireless loading and product data filtering, so the function will be simpler.

The index WXML part

   <! -->
   <view id="index_recommend" class="listbox {{showRecommendView? 'listboxhide':''}}">
          <text class="dj-tit">Products recommended</text>
          <view class="djlist cf">
            <! -- Item List -->
            <block wx:for="{{index_recommends}}" wx:key="unique">
              <view class="djbox">
                <view class="comico djmark">selling</view>
                <view id="{{item._id}}" class="dj-link" bindtap="bigImageClick">
                  <view class="djimgbox">
                    <image class="djimg" mode="widthFix" src="{{item.sPickLink}}"></image>
                  </view>
                  <text class="djname">{{item.sDescribe}}</text>
                  <view class="pricebox">
                    <text class="djpri">RMB {{item. IPriceReal}}</text>
                    <text class="djoldpri">RMB {{item. IOriPrice}}</text>
                  </view>
                </view>
                <view id="{{item._id}}" class="comico btn-cart" bindtap="bindCartTap">The shopping cart</view>
              </view>
            </block>
          </view>
        </view>
Copy the code

The index WXSS part

I won’t go into the styles section, but note that there is no support for displaying native images in WXSS. You need to upload the images to CDN or use Base64 to display them properly. To see the source code, go to my Github repository, where the Giuhub address is at the end of this article

Index. Js part

// index.js
// Obtain the application instance
const app = getApp()

Page({
  data: {"index_recommends":[
      {
      "sDescribe": "Wearable devices"."iMallId": "1000"."sPickLink": "http://qxguzbs2m.hd-bkt.clouddn.com/%E5%8F%AF%E7%A9%BF%E6%88%B4%E8%AE%BE%E5%A4%872.png"."iOriPrice": "1399"."iPriceReal": "999"
    },
      {
      "sDescribe": "Laptop"."iMallId": "1001"."sPickLink": "http://qxguzbs2m.hd-bkt.clouddn.com/%E7%AC%94%E8%AE%B0%E6%9C%AC%E7%94%B5%E8%84%911.png"."iOriPrice": "9999"."iPriceReal": "7999"
    },
      {
      "sDescribe": "Mobile phone"."iMallId": "1000"."sPickLink": "http://qxguzbs2m.hd-bkt.clouddn.com/%E6%89%8B%E6%9C%BA%20%282%29.png"."iOriPrice": "2999"."iPriceReal": "1999"
    },
      {
      "sDescribe": "Tablet"."iMallId": "1001"."sPickLink": "http://qxguzbs2m.hd-bkt.clouddn.com/%E5%B9%B3%E6%9D%BF%E7%94%B5%E8%84%91.png"."iOriPrice": "4999"."iPriceReal": "3999"}},],// The round play button clicks the event
  bigImageClick(e) {
    var p = e.currentTarget.dataset.grid
    wx.navigateTo({
      url: 'pages/detai/detail? id='+p
    })
  }
})
Copy the code

Ok, our product recommendation section is complete, take a look at the effect ~

Reference: small program development principles and actual combat

⚽ This article introduces the development of mall class small program mall home page production process and some matters needing attention ~

⚾ If this post helped you, please like it

🏀GitHubgithub.com/Awu1227 。

I have other columns at 🏉. Please read them

🏐Play with the beauty of CSS

🎱Vue went from giving up to getting started

🎳Simple JavaScript

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.

🍁 mall class small program actual combat (3) : mall home page production

Mall home page production

1. Design and implementation of the top navigation bar

The index WXML part

The index WXSS part

Index. Js part

2. Design and implementation of the rotation column

The index WXML part

The index WXSS part

The data portion of a round cast

3. Design and implementation of commodity recommendation

The index WXML part

The index WXSS part

Index. Js part

🍁 mall class small program actual combat (3) : mall home page production

Mall home page production

1. Design and implementation of the top navigation bar

The index WXML part

The index WXSS part

Index. Js part

2. Design and implementation of the rotation column

The index WXML part

The index WXSS part

The data portion of a round cast

3. Design and implementation of commodity recommendation

The index WXML part

The index WXSS part

Index. Js part

Related Posts

Canvas Basics (1)

JS Ninja Secrets in the timer mechanism in detail

So this is what you look like.