Shulou(Shulou.com)06/01 Report--

In this article, the editor introduces in detail "how to develop the classification on the left column of Mini Program in Mall". The content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to develop the classification in the left column of Mini Program in Mall" can help you solve your doubts. Let's follow the editor's train of thought to slowly deepen, together to learn new knowledge.

The figure below is as follows

Today, let's take a look at what is needed for the development of classified projects in the mall.

Layout Analysis:

The left box uses the standard stream

The right box uses absolute positioning (top, right)

Mini Program is shown in the following figure:

Related source code

.wxml

{{item.tree.desc}}

{{item.tree.desc}}

{{item.tree.desc2}}

No data available for the time being

.wxss

Page {

Background: # f5f5f5

}

/ * overall main box * /

.container {

Position: relative

Width: 100%

Height: 100%

Background-color: # fff

Color: # 939393

}

/ * left column main box * /

.nav _ left {

/ * set inline block-level elements (no positioning) * /

Display: inline-block

Width: 25%

Height: 100%

/ * set the background color of the main box to gray * /

Background: # f5f5f5

Text-align: center

}

/ * item*/ of list in the left sidebar

.nav _ left .nav _ left_items {

/ * each high 30px*/

Height: 30px

/ * Center vertically * /

Line-height: 30px

/ * reset the upper and lower padding to increase the height, the total height 42px*/

Padding: 6px 0

/ * set the lower boundary line only * /

Border-bottom: 1px solid # dedede

/ * text 14px*/

Font-size: 14px

}

/ * when the item of list in the left sidebar is selected * /

.nav _ left .nav _ left_items.active {

/ * the background color turns white * /

Background: # fff

}

/ * right column main box * /

.nav _ right {

/ * absolute positioning is used in the right box * /

Position: absolute

Top: 0

Right: 0

Flex: 1

/ * width 75%, height full, and use percentage layout * /

Width: 75%

Height: 100%

Padding: 10px

Box-sizing: border-box

Background: # fff

}

/ * item*/ of list in the right sidebar

.nav _ right .nav _ right_items {

/ * float left * /

Float: left

/ * the width of each item setting is 33.33% width /

Width: 33.33%

Height: 80px

Text-align: center

}

.nav _ right .nav _ right_items image {

/ * set width and height by picture * /

Width: 50px

Height: 30px

}

.nav _ right .nav _ right_items text {

/ * set text as a block-level element * /

Display: block

Margin-top: 5px

Font-size: 10px

/ * set the text overflow to. * /

Overflow: hidden

White-space: nowrap

Text-overflow: ellipsis

}

.js

Page ({

Data: {

NavLeftItems: []

NavRightItems: []

CurNav: 1

CurIndex: 0

}

OnLoad: function () {

/ / use the loaded data to access the network and set the required data to the data data object

Var that = this

Wx.request ({

Url: 'http://huanqiuxiaozhen.com/wemall/goodstype/typebrandList',

Method: 'GET'

Data: {}

Header: {

'Accept': 'application/json'

}

Success: function (res) {

Console.log (res)

That.setData ({

NavLeftItems: res.data

NavRightItems: res.data

})

}

})

}

/ / event handling function

SwitchRightTab: function (e) {

/ / get the id of the item item and the subscript value of the array

Let id = e.target.dataset.id

Index = parseInt (e.target.dataset.index)

/ / set the item clicked to the current index

This.setData ({

CurNav: id

CurIndex: index

})

}

})

After reading this, the article "how to develop the classification on the left column of Mini Program in Mall" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it yourself to understand it. If you want to know more about related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.