范围:深圳亚博app开发,软件定制开发,亚博app软件开发公司,深圳软件外包公司.TEL:3447249690
当前位置:首页 > app小程序

亚博-微信小程序开发动态横向导航模板快速开发教程

07-01 亚博APP
摘要:利用scroll-view组件,可实现横向转动功能。scroll-view内包括一个动态的view列表,代表导航的每项,导航要领受动态数组,然后利用列表展现。利用模板手艺做到可复用。 亚博

利用scroll-view组件,可实现横向转动功能。scroll-view内包括一个动态的view列表,代表导航的每项,导航要领受动态数组,然后利用列表展现。利用模板手艺做到可复用。

依照思绪,先要做个template。

新建一个wxml文件:navbar.wxml

{{currentTab==item.id ? \'active\' : \'\'}} bindtap=navbarTap>{{item.name}}

再建响应的wxss文件:navbar.wxss

.navbar{

background: #eeeeee;

white-space: nowrap;

}

.navbar .item{

margin: 20rpx;

display: inline-block;

}

.navbar .item.active{

color: #0000ff;

font-weight:800;

}

如许一个导航模板就建立好了。

接着在本身的页面中利用这个模板。

建议页面:index

在index.wxml中利用模板:

这里要留意src的路径要找对,data参数名称也要与模板里一致。

接着在index.wxss中利用模板样式:

@import /template/navbar.wxss; 引入这么一句就好了。

然后在index.js中绑定命据:

Page({ /** * 页面的初始数据 */ data: { menus: [ { id:0, name: \'生果\' }, { id:1, name: \'生果\' }, { id:2, name: \'一线海景\' }, { id:3, name: \'生果\' }, { id:4, name: \'生果\' }, { id:5, name: \'一线海景\' }, { id: 6, name: \'一线海景\' }, { id: 7, name: \'生果\' }, { id: 8, name: \'生果\' }, { id: 9, name: \'一线海景\' } ], currentTab: 0 }, navbarTap: function (e) { this.setData({ currentTab: e.currentTarget.id }); console.log(e); } })

运行成果:

/

相干资讯:微信小法式微信小法式开辟教程

版权保护: 本文由 亚博app开发 原创
转载请保留链接: http://www.jiayuanLi.com

关于我们      深圳亚博app定制开发软件有限公司,自2013年成立以来,为上千家企业提供软件外包、系统软件开发、亚博app开发、微信公众号开发、深圳亚博小程序开发等各种优秀的软件定制开发服务.关键词:软件外包公司、手机软件开发、app制作开发、手机亚博app开发、小程序开发公司【TEL】:3447249690 微信:3447249690 QQ:3447249690
  • 1578文章总数
  • 13访问次数
  • 建站天数