推荐下载
-
2020-05-12 浏览：789
-
2020-04-04 浏览：654
-
2020-05-06 浏览：560
-
2020-05-08 浏览：545
-
2020-05-12 浏览：543
微信小程序中下拉刷新和数据绑定的一些小坑
发布时间:2020-11-05
前言
最近10几天都在学习小程序的开发，遇到了一些问题和笔记有趣的东西，今天总结了一下，和大家分享
1.小程序中的template模块使用在一个月黑风高的夜晚，我突然发现一个很有意思的东西，那就是template模块，它可以将你定义的一个HTML5模块包住，然后利用template，在你的小程序任意一个页面使用，这样极大的减少了程序中的复制-粘贴，复制-粘贴(一般用于需要循环使用的界面)。下面就用我自己的一个template模块来讲解下。
第一步：创建页面在pages里面创建存储你template模块的页面，便于其他页面对其的引用
"pages/index/index", "pages/find/find", "pages/gift/gift", "pages/activity/activity", "pages/common/list",//存储template模块的页面 "pages/white/white" 第二步：创建template模块 template模块实例 <template name="job_list"> <view class="br"></view> <navigator url="../white/white" class="page_appmsg"> //点击跳转 <view class="page"> <view class="page__hd "> <image class="page__thumb" src=http://www.yiyongtong.com/archives/"{{image}}" mode="aspectFill"/> <view class="page__hd_title"> <view class="page__hd_title title">{{title}}</view> <view class="page__hd_title school">{{school}}</view> <view class="page__hd_title request"> <text class="page__hd_title pink">{{pink}}</text> <text class="page__hd_title time">{{time}}</text> <view class="page__hd_title cool"><i class="iconfont icon-zan1 active"></i>{{cool}}</view> </view> </view> </view> <view class='page__ft'> <i class="iconfont icon-jian-copy active"></i>{{page__ft}}} </view> </view> </navigator> </template>在你需要重复使用的html用一个<template>标签包起来，并给它取个名字 。
（当然了，还有WXSS的编写，这里因为不是很重要我就不放出来了）
完成了这步，你就可以尽情的在你需要这个模板的页面引用这个模块了。
①在你想要引用的界面的WXSS和WXML上引用template的wxml和wxss，
@import '../common/list.wxss'; <import src=http://www.yiyongtong.com/archives/"../common/list.wxml" />②在你需要的盒子里面添加template标签，你想要引用那个template模块，就在is里面填哪个模块的名字
<template is="job_list" data="{{jobs}}"/>如果你是在一个循环里面引用的template就需要改为data="{{...item}}"如：
<block wx:for="{{jobs}}" wx:key="{{index}}"> <template is="job_list" data="{{...item}}"/> </block>代码：
<import src=http://www.yiyongtong.com/archives/"../common/list.wxml" /> <view class="swiper-tab"> <view class="swiper-tab-item {{activeIndex==0?'active':''}}" data-current="0" bindtap="clickTab">活动</view> <view class="swiper-tab-item {{activeIndex==1?'active':''}}" data-current="1" bindtap="clickTab">视频</view> <view class="swiper-tab-item {{activeIndex==2?'active':''}}" data-current="2" bindtap="clickTab">直播</view> </view> <swiper current='{{activeIndex}}' bindchange="swiperTab"> <swiper-item> <view class="swiper-item__content"> <block wx:for="{{jobs}}" wx:key="{{index}}"> <template is="job_list" data="{{...item}}"/> </block> </view> </swiper-item> <swiper-item> <view class="swiper-item__content"> <block wx:for="{{jobs}}" wx:key="{{index}}"> <template is="job_list" data="{{...item}}"/> </block> </view> </swiper-item> <swiper-item> <view class="swiper-item__content"> <block wx:for="{{jobs}}" wx:key="{{index}}"> <template is="job_list" data="{{...item}}"/> </block> </view> </swiper-item> </swiper>效果图：
