本文主要介紹微信小程序用戶自定義模版用法,結(jié)合實(shí)例形式較為詳細(xì)的分析了微信小程序自定義模板的定義、數(shù)據(jù)調(diào)用、布局設(shè)置等簡單使用技巧,需要的朋友可以參考下。
1、新建一個(gè)wxml（為測(cè)試方便，這里將wxml文件建立在home目錄下）
/home/home/botmenu.wxml：
<template name="bottommenu">
<view class="bottomposition">
<navigator class="item_info" url="../home/home">
<image src="../img/sy.png"></image>
<text>首頁</text>
</navigator>
<navigator class="item_info" url="/pages/home/home">
<image src="../img/xx.png"></image>
<text>消息</text>
</navigator>
<navigator class="item_info" url="/pages/home/home">
<image src="../img/lz.png"></image>
<text>工具</text>
</navigator>
<navigator class="item_info" url="/pages/home/home">
<image src="../img/wo.png"></image>
<text>我</text>
</navigator>
</view>
</template>2、新建wxss
/home/home/botmenu.wxss：
.bottomposition{
width: 100%;
height: 10%;
position: fixed;
overflow: hidden;
left: 0;
top: 90%;
z-index: 1100;
display: flex;
border-top: 1rpx solid #dadada;
}
.item_info {
width: 25%;
height: 100%;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
.item_info image {
width: 20px;
height: 20px;
}
.item_info text {
margin-top: 5px;
font-size: 12px;
}
.infolist{
margin:10px;
padding: 0 10px;
font-size: 12px;
}3、頁面引用
<import src="../home/home.wxml"/> <view class="info"> <template is="bottommenu"></template> </view>
4、頁面樣式引用
@import "../home/home.wxss";
5、index.js中的data數(shù)據(jù)：
data: {
tool_list:[{
name:"在線JavaScript代碼美化、格式化工具",
url:"http://tools.jb51.net/code/js"
},{
name:"json代碼在線格式化/美化/壓縮/編輯/轉(zhuǎn)換工具",
url:"http://tools.jb51.net/code/jsoncodeformat"
},{
name:"中文繁體字簡體字轉(zhuǎn)換(繁簡轉(zhuǎn)換)工具",
url:"http://tools.jb51.net/transcoding/convertzh"
},{
name:"正則表達(dá)式在線生成工具",
url:"http://tools.jb51.net/regex/create_reg"
},{
name:"XML代碼在線格式化美化工具",
url:"http://tools.jb51.net/code/xmlcodeformat"
},{
name:"在線科學(xué)計(jì)算器",
url:"http://tools.jb51.net/jisuanqi/jsqkexue"
},{
name:"BASE64編碼解碼工具",
url:"http://tools.jb51.net/transcoding/base64"
}]
},6、index.wxml
腳本之家在線工具 <import src="../home/home.wxml"/> <view class="info"> <template is="bottommenu"></template> </view> {{item.name}} - {{item.url}}
以上內(nèi)容就是微信小程序用戶自定義模版的功能實(shí)現(xiàn)，希望能幫助到大家。
相關(guān)推薦：
微信小程序?qū)崿F(xiàn)動(dòng)態(tài)改變view標(biāo)簽寬度和高度的方法
微信小程序如何實(shí)現(xiàn)圖片放大預(yù)覽功能
以上是微信小程序用戶自定義模版的功能實(shí)現(xiàn)的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！
熱AI工具
Undress AI Tool
免費(fèi)脫衣服圖片
Undresser.AI Undress
人工智能驅(qū)動(dòng)的應(yīng)用程序，用于創(chuàng)建逼真的裸體照片
AI Clothes Remover
用于從照片中去除衣服的在線人工智能工具。
Clothoff.io
AI脫衣機(jī)
Video Face Swap
使用我們完全免費(fèi)的人工智能換臉工具輕松在任何視頻中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費(fèi)的代碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
功能強(qiáng)大的PHP集成開發(fā)環(huán)境
Dreamweaver CS6
視覺化網(wǎng)頁開發(fā)工具
SublimeText3 Mac版
神級(jí)代碼編輯軟件(SublimeText3)
如何用小紅書號(hào)查找用戶？能查到手機(jī)號(hào)嗎？
Mar 22, 2024 am 08:40 AM
隨著社交媒體的迅速發(fā)展，小紅書已經(jīng)成為了備受青睞的社交平臺(tái)之一。用戶可以通過創(chuàng)建小紅書號(hào)來展示個(gè)人身份，并與其他用戶交流互動(dòng)。如果你需要查找某個(gè)用戶的小紅書號(hào)碼，可以按照以下簡單步驟進(jìn)行操作。一、如何用小紅書號(hào)查找用戶？1.打開小紅書APP，點(diǎn)擊右下角的“發(fā)現(xiàn)”按鈕，然后選擇“筆記”選項(xiàng)。2.在筆記列表中，找到你想查找的用戶發(fā)布的那篇筆記。點(diǎn)擊進(jìn)入筆記詳情頁。3.在筆記詳情頁中，點(diǎn)擊用戶頭像下方的“關(guān)注”按鈕，即可進(jìn)入該用戶的個(gè)人主頁。4.在用戶個(gè)人主頁右上角，點(diǎn)擊三個(gè)點(diǎn)按鈕，然后選擇“個(gè)人信息
如何在Netflix中快速設(shè)置自定義頭像
Feb 19, 2024 pm 06:33 PM
Netflix上的頭像是你流媒體身份的可視化代表。用戶可以超越默認(rèn)的頭像來展示自己的個(gè)性。繼續(xù)閱讀這篇文章，了解如何在Netflix應(yīng)用程序中設(shè)置自定義個(gè)人資料圖片。如何在Netflix中快速設(shè)置自定義頭像在Netflix中，沒有內(nèi)置功能來設(shè)置個(gè)人資料圖片。不過，您可以通過在瀏覽器上安裝Netflix擴(kuò)展來實(shí)現(xiàn)此目的。首先，在瀏覽器上安裝Netflix擴(kuò)展的自定義個(gè)人資料圖片。你可以在Chrome商店買到它。安裝擴(kuò)展后，在瀏覽器上打開Netflix并登錄您的帳戶。導(dǎo)航至右上角的個(gè)人資料，然后單擊
以超級(jí)用戶身份登錄Ubuntu
Mar 20, 2024 am 10:55 AM
在Ubuntu系統(tǒng)中，root用戶通常是禁用狀態(tài)的。要激活root用戶，可以使用passwd命令設(shè)置密碼，然后使用su-命令以root身份登錄。根用戶是具有系統(tǒng)管理權(quán)限且不受限制的用戶。他擁有訪問和修改文件、用戶管理、軟件安裝和刪除，以及系統(tǒng)配置更改等權(quán)限。根用戶與普通用戶有著明顯的區(qū)別，根用戶擁有系統(tǒng)中最高的權(quán)限和更廣泛的控制權(quán)。根用戶可以執(zhí)行重要的系統(tǒng)命令和編輯系統(tǒng)文件，而普通用戶則無法做到這一點(diǎn)。在本指南中，我將探討Ubuntu根用戶，如何以根用戶身份登錄，以及它與普通用戶的不同之處。注意
教程：Ubuntu系統(tǒng)如何刪除普通用戶賬戶？
Jan 02, 2024 pm 12:34 PM
Ubuntu系統(tǒng)添加了很多用戶，想在不用的用戶想要?jiǎng)h除，該怎么刪除呢？下面我們就來看看詳細(xì)的教程。1、打開終端命令行，運(yùn)用userdel命令刪除指定的用戶，注意要加sudo權(quán)限指令，如下圖所示2、在刪除的時(shí)候一定注意是在管理員目錄下的，普通的用戶是沒有這個(gè)權(quán)限的，如下圖所示3、刪除指令執(zhí)行完了以后怎么判斷是否真正刪除了呢？下面我們運(yùn)用cat命令打開passwd文件，如下圖所示4、我們看到passwd文件中已經(jīng)沒有了所刪除的用戶信息了，這證明用戶已經(jīng)被刪除了，如下圖所示5、然后我們進(jìn)入home文件
實(shí)現(xiàn)微信小程序中的卡片翻轉(zhuǎn)特效
Nov 21, 2023 am 10:55 AM
實(shí)現(xiàn)微信小程序中的卡片翻轉(zhuǎn)特效在微信小程序中，實(shí)現(xiàn)卡片翻轉(zhuǎn)特效是一種常見的動(dòng)畫效果，可以提升用戶體驗(yàn)和界面交互的吸引力。下面將具體介紹如何在微信小程序中實(shí)現(xiàn)卡片翻轉(zhuǎn)的特效，并提供相關(guān)代碼示例。首先，需要在小程序的頁面布局文件中定義兩個(gè)卡片元素，一個(gè)用于顯示正面內(nèi)容，一個(gè)用于顯示背面內(nèi)容，具體示例代碼如下：<!--index.wxml-->&l
Eclipse中自定義快捷鍵設(shè)置的方法
Jan 28, 2024 am 10:01 AM
如何在Eclipse中自定義快捷鍵設(shè)置？作為一名開發(fā)人員，在使用Eclipse進(jìn)行編碼時(shí)，熟練掌握快捷鍵是提高效率的關(guān)鍵之一。Eclipse作為一款強(qiáng)大的集成開發(fā)環(huán)境，不僅提供了許多默認(rèn)的快捷鍵，還允許用戶根據(jù)自己的偏好進(jìn)行個(gè)性化的定制。本文將介紹如何在Eclipse中自定義快捷鍵設(shè)置，并給出具體的代碼示例。打開Eclipse首先，打開Eclipse，并進(jìn)入
什么是 sudo，為什么它如此重要？
Feb 21, 2024 pm 07:01 PM
sudo（超級(jí)用戶執(zhí)行）是Linux和Unix系統(tǒng)中的一個(gè)關(guān)鍵命令，允許普通用戶以root權(quán)限運(yùn)行特定命令。sudo的功能主要體現(xiàn)在以下幾個(gè)方面：提供權(quán)限控制：sudo通過授權(quán)用戶以臨時(shí)方式獲取超級(jí)用戶權(quán)限，從而實(shí)現(xiàn)了對(duì)系統(tǒng)資源和敏感操作的嚴(yán)格控制。普通用戶只能在需要時(shí)通過sudo獲得臨時(shí)的特權(quán)，而不需要一直以超級(jí)用戶身份登錄。提升安全性：通過使用sudo，可以避免在常規(guī)操作中使用root賬戶。使用root賬戶進(jìn)行所有操作可能會(huì)導(dǎo)致意外的系統(tǒng)損壞，因?yàn)槿魏五e(cuò)誤或不小心的操作都將具有完全的權(quán)限。而
edius自定義屏幕布局的操作流程
Mar 27, 2024 pm 06:50 PM
1、下圖是edius默認(rèn)的屏幕布局，默認(rèn)的EDIUS窗口布局是橫向版式，因此在單顯示器環(huán)境中，許多窗口是重疊在一起的，且預(yù)覽窗口為單窗口模式。2、您可以通過【視圖】菜單欄啟用【雙窗口模式】，使預(yù)覽窗口同時(shí)顯示播放窗口和錄制窗口。3、您可以通過【視圖菜單欄>窗口布局>常規(guī)】來恢復(fù)默認(rèn)屏幕布局。另外您還可以自定義適合您的布局方式，并保存為常用屏幕布局：將窗口拖動(dòng)成適合自己的布局，然后點(diǎn)擊【視圖>窗口布局>保存當(dāng)前布局>新建】，在彈出的【保存當(dāng)前布局】小窗口中輸入布局名稱，單擊確定
