How to realize the Joint menu by WeChat Mini Programs

This article mainly introduces WeChat Mini Programs how to achieve the linkage menu, the article is very detailed, has a certain reference value, interested friends must read it!

Step 1: find out

The menu on the left and right side is simply to divide an area into left and right parts. As for the components, I think we can go directly to the Wechat development documentation to see. Through the code, I think it should be understandable. Go straight to the code.

Step 2: take a look at the effect first.

The operation efficiency is still very fast, without stutter phenomenon.

Step 3: implement (code)

Here I only put some of them, but also can be directly realized, there is no problem, can be modified according to their own needs.

Wxml

{{item}} {{item}} {{item}}

Wxss

.under _ line {width: 100%; border-top: 1rpx solid # efefef;}. Left {border-top: 1rpx solid # efefef; border-right: 1rpx solid # efefef;}. Text-style {width: 200rpx; height: 140rpx; line-height: 140rpx; text-align: center; font-size: 34rpx; font-family: PingFangSC-Semibold; color: rgba (51,51,51,1);} .active3 {display: block; width: 500rpx; height 6rpx: Background: rgb (88123,193); position: relative; left: 0rpx; bottom: 30rpx;} .active2 {color: rgb (88123193);} .active1 {color: # 96C158;} .active {display: block; width: 50rpx; height: 6rpx; background: # 96C158; position: relative; left: 75rpx; bottom: 30rpx;} .scrollY {width: 210rpx; position: fixed; left: 0; top: 0; border-right: 1rpx solid # efefef } .right {border-top: 1rpx solid # efefef; border-left: 1rpx solid rgba; margin-left: 2rpx;}. ScrollY2 {width: 520rpx; position: fixed; right: 0; top: 0; border-left: 1rpx solid rgba; margin-left: 2rpx;} .text-style2 {width: 520rpx; height: 140rpx; line-height: 140rpx; text-align: left; font-size: 34rpx; font-family: PingFangSC-Semibold Color: rgba (51, 51, 51, 1);}. Button_call {height: 90rpx; width: 90rpx; position: fixed; bottom: 150rpx; right: 13rpx; opacity: 0.7; z-index: 100;}

Js

Page (initial data of {/ * page * / data: {lists: ["main category 1", "main category 2", "main category 3", "student work department", "party committee department", "school worker and educational administration", "retired work office", "security office", "finance and audit", "laboratory and equipment", "personnel office" "Security Office", "College", "directly affiliated Units", "other"], lists_r0: ["subcategory 1 of main Class 1", "subcategory 2 of main Class 1", "subcategory 3 of main Class 1", "subcategory 4 of main Class 1", "Party Committee Department", "School staff and academic Affairs", "Retirement work Office", "Security Office", "Finance and Audit" "Laboratories and equipment", "personnel Department", "Security Office", "College", "directly affiliated Units", "other"], lists_r1: ["subcategory 1 of main Class 2", "subcategory 2 of main Class 2", "subcategory 3 of main Class 2", "subcategory 4 of main Class 2", "Party Committee Department", "School staff and academic Affairs", "Retirement Office" "Security Office", "Finance and Audit", "Laboratories and equipment", "personnel Department", "Security Office", "College", "directly affiliated Unit", "other"], indexId: 0, indexIdr0: 0, indexIdr0: 1,} / / left click event jumpIndex (e) {let index = e.currentTarget.dataset.menuindex let that = this that.setData ({indexId: index}) }, jumpIndexR0 (e) {let index = e.currentTarget.dataset.menuindex let that = this that.setData ({indexIdr0: index});}, / * * Lifecycle function-- listen for page loading * / onLoad: function (options) {var that = this wx.getSystemInfo ({success: function (res) {that.setData ({winHeight: res.windowHeight})) }) }, / * Lifecycle function-first rendering of listening page completed * / onReady: function () {}, / * Lifecycle function-listening Page display * / onShow: function () {}, / * Lifecycle function-listening Page Hidden * / onHide: function () {} / * Lifecycle function-listens to page unload * / onUnload: function () {}, / * page related event handler-listens to user drop-down action * / onPullDownRefresh: function () {}, / * Handler function for pull-down event on page * / onReachBottom: function () {} / * users click on the upper right corner to share * / onShareAppMessage: function () {}})

Json

{"usingComponents": {}, "navigationBarBackgroundColor": "the background color you want", "navigationBarTitleText": "telephone inquiry", "navigationBarTextStyle": "black", "enablePullDownRefresh": true} above are all the contents of the article "WeChat Mini Programs how to achieve Linkage menu". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!