WeChat applet implementation left sliding navigation bar

This example, for everyone to share the specific code of the WeChat applet to implement the left sliding navigation bar for reference, the specific content is as follows

left sliding navigation bar, such as

微信小程序实现左侧滑动导航栏

                  WXSS   .under_Line {width: 100%; border-top: 1rpx solid #efefef;}. scrolly {width: 200rpx; Position: fixed; Left: 0; TOP : 0; border-right: 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-semily: rac (51, 51, 51, 1);} .active1 {color: # 85d1fd;} .active { Display: block;Width: 50rpx; background: # 85d1fd; position: relative; left: 75rpx; bottom: 30rpx;}   
JS

 Page ({/ ** * Page initial data * / data: {lists: ["Title 1", "Title 2", "Title 3", "Title Four", "Title 5" "Title Six", "Title Seven", "Title 8", "Title Nine", "Title Ten", "Title of Title", "Title 12"], INDEXID: 0,}, // On the left side Click Event JumpIndex (e) {let index = E.currentTarget.DataSet.Menuindex let that = this today.SetData ({indexid: index});}, / ** * Lifecycle function - listening page Load * / Onload: function (options) {var this = this wx.getsystemInfo ({Success: function ({winheight: res.windowheight});}});}, / ** * Lifecycle function - listening page First rendering completion * / onReady: function () {}, / ** * Lifecycle function - listening page Display * / onshow: function () {}, / ** * Lifecycle function - listening page Hide * / onhide : function () {}, / ** * Lifecycle Function - Listening Page Uninstall * / Onunload: Function () {}, / ** * Page Related Event Processing Function - Monitor User Drop Action * / OnpullDownRefresh: Function ()}, / ** * Page pull up the handle of the bottom of the bottom * / OnReachbottom: function () {}, / ** * Users click on the upper right corner * / onshareAppMessage: function () {}})   
More Tutorials Click on “Vue.js Front End Components Learning Tutorial”, welcome everyone to learn.

With regard to the tutorial of the Vue.js component, please click on the Topic Vue.js Component Learning Tutorial for learning.
The above is all the content of this article, I hope to help everyone, I hope everyone will support Tumi Cloud.
                     
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment