1, опорный шаблон
Относящиеся к тому же макет страницы, различное содержание можно ссылаться по шаблону
Один из способов:
< Импорт SRC = "./person-card.swan" />
< шаблон является = "человек-карта" данных = "{{человек}}" />
方式二:
< Включаемой в SRC = "header.swan" />
2.filter фильтр
- Файл фильтра называется: модуль .filter.js имя;
- Фильтр по умолчанию экспорта способом внешнего облучения его внутренней частной функции;
- Функция фильтрации может экспортировать только функцию;
- Функция фильтра обратного вызова событие не может быть использована в качестве компонентов;
- Фильтрующий модуль может быть создан независимо тоже может быть в виде встраиваемого;
- Фильтр не поддерживает глобальные переменные;
- Множество идентичных тегов фильтра не появляется Src значения атрибута, значение атрибута является модулем уникального идентификатора идентификации модуля.
Использование:
// maxVal.filter.js
экспорта по умолчанию {
Maxin: обр => { вар макс = не определено; для ( вар я = 0; я <arr.length; ++ я) { макс = макс === определено? обр [I]: (макс> = обр [я] макс: обр [я]); } Возвращать макс; } };
// index.js
страницу ({
данные: {
массив: [ 1, 3, 6, 8, 2, 0]
}
});
<! - лебедь模版->
< вид> {{swan.maxin (массив)}} </ вид>
< фильтр SRC = "./maxVal.filter.js" модуль = "лебедь"> </ фильтр>
Импорт файлов 3. Общественный CSS
/ * Index.css * /
@ импорт "header.css";
Примечание: Для совместимости iPhoneX нижней части безопасной зоны, мы предлагаем набор совместимых стилей непосредственно
лебединая безопасности обивка дна класс
< Посмотреть класс = "Security-Swan-набивка дно"> Тест </ просмотр>
<- iPhoneX в других моделях, узел будет автоматически получить вид "отступ-дно: 34px"! Стиль ->
4. Пользовательский компонент
Компонент является небольшая программа, которая Dingding полезные вещи
1, создавать компоненты
<! - определение внутреннего шаблона самосборки (custom.swan) ->
< Вид класс = "имя" bindtap = "водопроводная">
{{имя}} {{возраст}}
</ Вид>
// пользовательский компонент логика (Custom.js)
Компонент ({
Свойства: { . // определяет имя атрибута может быть использовано в процессе сборки, переменная передается от внешнего компонента может быть использован непосредственно в шаблоне имени: { Тип: Строка , значение: 'Swan', } } Данные: { Возраст: . 1 } Методы: { TAP: функция ( ) {} } })
2. Вызов
//页面配置home.json JSON
{ "usingComponents": { "обычай": "/ компоненты / пользовательских / пользовательские" } }
<! - шаблон страницы (home.swan) ->
< View> <! - пользовательские компоненты , указанные на странице -> < Пользовательские имя = "swanapp" Age = '18 «> </ заказ> </ View> . 3, инструкция слота сборки гнезда, эта вещь не глубокое понимание ,, ИНГ прокалывать уши гибких жабр
<! - определения компонентов ->
< Вид> < слот имя = "slot1"> </ слот> < слот имя = "SLOT2"> </ слот> </ вид>
<! - страница или компонент использует компоненты ->
< Вид>
< Пользовательский-компонентный> < Посмотреть слот = «slot1»> Я вставляется в верхнюю сборку </ Вид> < Посмотреть слот = «SLOT2»> Я бы быть вставлен под узлом </ Вид> </ Пользовательский-компонентный>