개발 과정에서 일부 공개 기능 코드나 효과를 구성 요소로 하나씩 캡슐화한 다음 사용해야 하는 페이지에서 호출하는 경우가 많습니다.
작은 프로그램 개발을 위해 일부 공개 구성 요소를 캡슐화할 수도 있습니다.
아래에서는 기능 구성 요소 등 아이콘을 클릭하여 확장할 수 있는 메뉴에 대해 설명합니다.
위 그림과 같이 작은 플러그인은 클릭하면 확장되고, 클릭하면 다시 닫히는 버튼이 뜹니다. 닫다.
페이지의 WXML(APP.wxml)
<template name="widget-dialog-iconList"> <view class="com-widget-iconList {{close==1?'hideImg':''}}" style="display:flex;flex-direction:row;"> <view style="display:flex;flex-direction:row;"> <view class="left-icon" style="display:flex;flex-direction:row;"> <view class="left-circle"></view> <image class="icon1" src="http://html51.com/static/xcx/v1/goo/md_logo.png"></image> </view> <view class="middle_icon " style="display:flex;flex-direction:row;"> <navigator url="../tua/home"> <view class="section1"> <view><image class="icon2" src="http://html51.com/static/xcx/v1/goo/firsticon.png"></image></view> <view class="text">首页</view> </view> </navigator> <navigator url="../ord/list"> <view class="section2"> <view><image class="icon2" src="http://html51.com/static/xcx/v1/goo/orderIcon.png"></image></view> <view class="text">订单</view> </view> </navigator> <navigator url="../usr/center"> <view class="section3"> <view><image class="icon3" src="http://html51.com/static/xcx/v1/goo/myself.png"></image></view> <view class="text">我的</view> </view> </navigator> <view class="right-icon" style="display:flex;flex-direction:row;"> <image class="iconright" src="http://html51.com/static/xcx/v1/goo/delAllIcon.png" bindtap="closeAllIcon"></image> </view> </view> </view> </view> <view class="iconOnly {{close==0?'hideImg':''}}"> <image class="iconOnlyPic" src="http://html51.com/static/xcx/v1/goo/md_logo.png" bindtap="showAllIcon"></image> </view> </template>
주로 플러그인의 표면 표시 효과이므로 태그에 적어주시면 됩니다.
페이지의 JS(APP.js)
var iconList = {}; //设置一个对象名字存放数据 iconList.Wdg= { //存放要给VIEW层的页面数据,closeAllIcon ,showAllIcon 是对应的方法 data: { index: 0, close:0 }, closeAllIcon: function(e){ this.setData({ close:1 }) }, showAllIcon :function(e){ this.setData({ close:0 }) } }; module.exports=iconList //将接口的进行暴露,方便在外面调用
그런 다음 캡슐화되어 사용할 차례입니다.
필수 WXML 페이지에서 :
<template is="widget-dialog-iconList" data="{{你要传到页面的数据}}"></template>
var util= require('../../util/util'); var Page = new util.Page({ Wdgs: [iconList.Wdg] });