§ List – Development preparation

Video address: v.qq.com/x/page/f055…

Before we start, please import the code/ directory in the ch3-1 branch into wechat Development Tools. This chapter will mainly teach you how to make a list with applets that can be loaded indefinitely. Hopefully this gives you a sense of how to make lists.


How infinite list loading works

An infinite list is a page-by-page presentation of all data to the user. We only request one page of data at a time. When we judge that the user has finished reading this page, we immediately request the data from the next page and render it to the user so that it feels like there is always something to look at.

That, of course, in which it is important to involve the request there is sure to wait for, handle the request load state, to the user by the good experience is also very important, otherwise if the network condition, and not to the user program is trying to load, users can easily thought he finished watching, or program died.


The functionality provided by our list

  1. Silently loading
  2. Tag has been read
  3. Offer to share


Core technologies and apis involved

  1. Wx: for usage
  2. The use of the onReachBottom
  3. Wx. The use of the storage
  4. Wx. The use of the request
  5. Promise
  6. The use of the onShareAppMessage


Before we go into formal development, we modify the app.json file and modify it as follows:

  1. Modify thepagesField to add page configuration for the applet
  2. Modify thewindowField, adjust the header style of the applet, i.enavigationBar
{
  "pages": ["pages/index/index"."pages/detail/detail"]."window": {"backgroundTextStyle":"light"."navigationBarBackgroundColor": "#4abb3b"."navigationBarTitleText": IKcamp English Learning."backgroundColor": "#f8f8f8"."navigationBarTextStyle":"white"
  },
  "netWorkTimeout": {
    "request": 10000."connectSocket": 10000."uploadFile": 10000."downloadFile": 10000
  },
  "debug": true
}
Copy the code


Now that everything is in place, let’s begin the process of creating the list page.

You can preview our final production renderings:

After analyzing the page, it is clear that the date is a unit of page structure, and each article within a unit is a small unit. To make our page look like this, the process is very simple, I won’t repeat it again, modify the index. WXML file:

<view class="wrapper">
    <view class="group">
        <view class="group-bar">
            <view class="group-title on">Today,</view>
        </view>
        <view class="group-content">
            <view class="group-content-item">
                <view class="group-content-item-desc ellipsis-multi-line ellipsis-line-3">Why do smart people keep their cool?</view>
                <image class="group-content-item-img" mode="aspectFill" src="https://n1image.hjfile.cn/mh/2017/06/26/9ffa8c56cfd76cf5159011f4017f022e.jpg"/>
            </view>
        </view>
    </view>
    <view class="group">
        <view class="group-bar">
            <view class="group-title">On June 27</view>
        </view>
        <view class="group-content">
            <view class="group-content-item">
                <view class="group-content-item-desc ellipsis-multi-line ellipsis-line-3">Why do smart people keep their cool?</view>
                <image class="group-content-item-img" mode="aspectFill" src="https://n1image.hjfile.cn/mh/2017/06/26/9ffa8c56cfd76cf5159011f4017f022e.jpg"/>
            </view>
        </view>
    </view>
    <view class="no-more" hidden="">I don't have any more for now</view>
</view>    
Copy the code


Modify index. WXSS file:

.wrapper .group {
  padding: 0 36rpx 10rpx 36rpx;
  background: #fff;
  margin-bottom: 16rpx
}

.wrapper .group-bar {
  height: 114rpx;
  text-align: center
}

.wrapper .group-title {
  position: relative;
  display: inline-block;
  padding: 0 12rpx;
  height: 40rpx;
  line-height: 40rpx;
  border-radius: 4rpx;
  border: solid 1rpx #e0e0e2;
  font-size: 28rpx;
  color: #ccc;
  margin-top: 38rpx;
  overflow: visible
}

.wrapper .group-title:after..wrapper .group-title:before {
  content: ' ';
  top: 18rpx;
  position: absolute;
  width: 32rpx;
  height: 1rpx;
  transform: scaleY(5);border-bottom: solid 1px #efefef
}

.wrapper .group-title:before {
  left: -56rpx
}

.wrapper .group-title:after {
  right: -56rpx
}

.wrapper .group-title.on {
  border: solid 1rpx #ffc60e;
  color: #ffc60e
}

.wrapper .group-title.on:after..wrapper .group-title.on:before {
  border-bottom: solid 1px #ffc60e
}

.wrapper .group-content-item {
  position: relative;
  width: 100%;
  height: 194rpx;
  margin-bottom: 28rpx
}

.wrapper .group-content-item-desc {
  font-size: 36rpx;
  font-weight: 500;
  height: 156rpx;
  line-height: 52rpx;
  margin-right: 300rpx;
  margin-top: 8rpx;
  overflow: hidden;
  color: # 333
}

.wrapper .group-content-item-img {
  position: absolute;
  right: 0;
  top: 0;
  vertical-align: top;
  width: 260rpx;
  height: 194rpx
}

.wrapper .group-content-item.visited .group-content-item-desc {
  color: # 999
}

.wrapper .no-more {
  height: 44rpx;
  line-height: 44rpx;
  font-size: 32rpx;
  color: #ccc;
  text-align: center;
  padding: 20rpx 0
}
Copy the code


The static pages have been created, and in the next article we will take you through the development of the business process

IKcamp website: www.ikcamp.com

Visit the official website to read all the free sharing courses: iKcamp produced | the latest network | wechat small program | Share the beginner and intermediate training course based on the latest version 1.0 developer tools. Contains: articles, videos, source code

IKcamp’s original new book “Mobile Web Front-end Efficient Development Combat” has been sold on Amazon, JD.com and Dangdang.

IKcamp latest activities

Registration address: www.huodongxing.com/event/54099…

Face-to-face communication with the R&D team that ranked fourth in the total list of “Everyday Speaking” small programs and first in the education category.

In 2019, iKcamp’s original new book Koa and Node.js Development Actual Combat has been sold on JD.com, Tmall, Amazon and Dangdang!