이 글에서는 주로 WeChat Mini 프로그램 사용자 정의 템플릿의 사용법을 소개하고, WeChat Mini 프로그램 사용자 정의 템플릿의 정의, 데이터 호출, 레이아웃 설정 및 기타 간단한 사용 기술을 도움이 필요한 친구들이 참고할 수 있는 예시 형태로 자세히 분석합니다. to it
이 기사의 예에서는 WeChat 미니 프로그램에 대한 사용자 정의 템플릿 사용을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다.
1. 새 wxml을 만듭니다. (테스트 편의를 위해 wxml 파일은 여기 홈 디렉터리에 생성됩니다.)
/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/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. index.js의 데이터 데이터:
@import "../home/home.wxss";
6.index.wxml
data: { tool_list:[{ name:"在线JavaScript代码美化、格式化工具", url:"http://tools.jb51.net/code/js" },{ name:"json代码在线格式化/美化/压缩/编辑/转换工具", url:"http://tools.jb51.net/code/jsoncodeformat" },{ name:"中文繁体字简体字转换(繁简转换)工具", url:"http://tools.jb51.net/transcoding/convertzh" },{ name:"正则表达式在线生成工具", url:"http://tools.jb51.net/regex/create_reg" },{ name:"XML代码在线格式化美化工具", url:"http://tools.jb51.net/code/xmlcodeformat" },{ name:"在线科学计算器", url:"http://tools.jb51.net/jisuanqi/jsqkexue" },{ name:"BASE64编码解码工具", url:"http://tools.jb51.net/transcoding/base64" }] },
위 내용은 앞으로 모든 분들에게 도움이 되기를 바랍니다.
관련 기사:
AngularJS의 MVC에 대한 복잡한 작업CommonsChunkPlugin을 사용하여 공용 모듈을 추출하는 방법ReactNative를 사용하여 Toast를 구현하는 방법Angular CLI 설치 튜토리얼 비동기 구현 Vuejs위 내용은 WeChat 미니 프로그램에서 사용자 정의 템플릿을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!