【微信小程序開發】快速開發一個(gè)動(dòng)态橫向導航模闆并使用 - 新聞資(zī)訊 - 雲南小程序開發|雲南軟件開發|雲南網站(zhàn)建設-西山區知普網絡科技工作室

159-8711-8523

雲南網建設/小程序開發/軟件開發

知識

不管是網站(zhàn),軟件還是小程序,都要直接或間接能為您産生價值,我們在追求其視覺表現的同時,更側重于功能的便捷,營銷的便利,運營的高效,讓網站(zhàn)成為營銷工具,讓軟件能切實提升企業(yè)内部管理水平和(hé)效率。優秀的程序為後期升級提供便捷的支持!

【微信小程序開發】快速開發一個(gè)動(dòng)态橫向導航模闆并使用

發表時間:2021-3-31

發布人:葵宇科技

浏覽次數:59

思路(lù):使用scroll-view組件,可(kě)實現橫向滾動(dòng)功能。scroll-view内包含一個(gè)動(dòng)态的view列表,代表導航的每一項,導航要接收動(dòng)态數組,然後使用列表展示。使用模闆技術(shù)做到可(kě)複用。

按照思路(lù),先要做個(gè)template。

新建一個(gè)wxml文(wén)件:navbar.wxml

<template name="navbar">
<scroll-view class='navbar' scroll-x="true" style="width: 100%">
<view id="{{item.id}}" wx:for="{{menus}}" wx:key="{{item.id}}" class="item {{currentTab==item.id ? 'active' : ''}}" bindtap="navbarTap">{{item.name}}</view>
</scroll-view >
</template>

再建相應的wxss文(wén)件:navbar.wxss

 .navbar{  
background: #eeeeee;
white-space: nowrap;
}
.navbar .item{
margin: 20rpx;
display: inline-block;
}
.navbar .item.active{
color: #0000ff;
font-weight:800;
}

這樣一個(gè)導航模闆就創建好了。

接着在自己的頁面中(zhōng)使用這個(gè)模闆。

建議頁面:index

在index.wxml中(zhōng)使用模闆:

<import src=https://www.wxapp-union.com/"navbar.wxml" />
<view>
<template is="navbar" data="{{menus,currentTab}}" />
</view>

這裡要注意src的路(lù)徑要找對,data參數名稱也要與模闆裡一緻。

接着在index.wxss中(zhōng)使用模闆樣式:

@import "/template/navbar.wxss";
引入這麼一句就行了。

然後在index.js中(zhōng)綁定數據:

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);
}
})

運行結果:

相關(guān)案例查看更多