用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

微信小程序的数据绑定与下拉刷新与template模块使用问题

admin 2017-12-12 13:57

前言最近10几天都在学习小程序的开发,遇到了一些问题和笔记有趣的东西,今天总结了一下,和大家分享1.小程序中的template模块使用在一个月黑风高的夜晚,我突然发现一个很有意思的东西,那就是template模块,它可以 ...

前言

最近10几天都在学习小程序的开发,遇到了一些问题和笔记有趣的东西,今天总结了一下,和大家分享

1.小程序中的template模块使用

在一个月黑风高的夜晚,我突然发现一个很有意思的东西,那就是template模块,它可以将你定义的一个HTML5模块包住,然后利用template,在你的小程序任意一个页面使用,这样极大的减少了程序中的复制-粘贴,复制-粘贴(一般用于需要循环使用的界面)。下面就用我自己的一个template模块来讲解下。

第一步:创建页面

在pages里面创建存储你template模块的页面,便于其他页面对其的引用

  1. "pages/index/index",
  2. "pages/find/find",
  3. "pages/gift/gift",
  4. "pages/activity/activity",
  5. "pages/common/list",//存储template模块的页面
  6. "pages/white/white"

第二步:创建template模块

template模块实例

  1. <template name="job_list">
  2. <view class="br"></view>
  3. <navigator url="../white/white" class="page_appmsg"> //点击跳转
  4. <view class="page">
  5. <view class="page__hd ">
  6. <image class="page__thumb" src="{{image}}" mode="aspectFill"/>
  7. <view class="page__hd_title">
  8. <view class="page__hd_title title">{{title}}</view>
  9. <view class="page__hd_title school">{{school}}</view>
  10. <view class="page__hd_title request">
  11. <text class="page__hd_title pink">{{pink}}</text>
  12. <text class="page__hd_title time">{{time}}</text>
  13. <view class="page__hd_title cool"><i class="iconfont icon-zan1 active"></i>{{cool}}</view>
  14. </view>
  15. </view>
  16. </view>
  17. <view class='page__ft'>
  18. <i class="iconfont icon-jian-copy active"></i>{{page__ft}}}
  19. </view>
  20. </view>
  21. </navigator>
  22. </template>

在你需要重复使用的html用一个标签包起来,并给它取个名字 。 
(当然了,还有WXSS的编写,这里因为不是很重要我就不放出来了) 
完成了这步,你就可以尽情的在你需要这个模板的页面引用这个模块了。

第三步:在各个页面引用template模块

①在你想要引用的界面的WXSS和WXML上引用template的wxml和wxss,

  1. @import '../common/list.wxss';
  2. <import src="../common/list.wxml" />

②在你需要的盒子里面添加template标签,你想要引用那个template模块,就在is里面填哪个模块的名字

  1. <template is="job_list" data="{{jobs}}"/>

如果你是在一个循环里面引用的template就需要改为data="{{...item}}"如:

  1. <block wx:for="{{jobs}}" wx:key="{{index}}">
  2. <template is="job_list" data="{{...item}}"/>
  3. </block>

代码:

  1. <import src="../common/list.wxml" />
  2. <view class="swiper-tab">
  3. <view class="swiper-tab-item {{activeIndex==0?'active':''}}" data-current="0" bindtap="clickTab">活动</view>
  4. <view class="swiper-tab-item {{activeIndex==1?'active':''}}" data-current="1" bindtap="clickTab">视频</view>
  5. <view class="swiper-tab-item {{activeIndex==2?'active':''}}" data-current="2" bindtap="clickTab">直播</view>
  6. </view>
  7. <swiper current='{{activeIndex}}' bindchange="swiperTab">
  8. <swiper-item>
  9. <view class="swiper-item__content">
  10. <block wx:for="{{jobs}}" wx:key="{{index}}">
  11. <template is="job_list" data="{{...item}}"/>
  12. </block>
  13. </view>
  14. </swiper-item>
  15. <swiper-item>
  16. <view class="swiper-item__content">
  17. <block wx:for="{{jobs}}" wx:key="{{index}}">
  18. <template is="job_list" data="{{...item}}"/>
  19. </block>
  20. </view>
  21. </swiper-item>
  22. <swiper-item>
  23. <view class="swiper-item__content">
  24. <block wx:for="{{jobs}}" wx:key="{{index}}">
  25. <template is="job_list" data="{{...item}}"/>
  26. </block>
  27. </view>
  28. </swiper-item>
  29. </swiper>

效果图:

2.数据绑定

又是一个月黑风高的夜晚,我在实现点亮的功能的时候,发现我只点了一个地方的点赞,整个页面的点赞都亮了起来,这肯定是不行的,用户明明只对这一个感兴趣,你怎么能全部点亮呢?于是我开始了思考,发现我犯了一个十分愚蠢的问题,那就是没有给我的数据绑定一个值,这就好像没有给喊名字一样:到了饭点你出去大喊一声:儿子,回家吃饭了!结果肯定是家家的儿子都回去吃饭了,然而别人家的饭都还没开始煮呢,你怎么就喊人家回去了呢,你肯定得喊:二狗子,回家吃饭了!别人家的娃才不会也跟着回家。这和点击事件是一个道理的,你必须给你的每项数据绑定一个id,用if语句,将数组遍历一遍,将每个数据的ID拿出来看看,看下你点的这个数据的ID,与数组中哪个相符合。如何成功配对了 ,恭喜,你可以执行点亮操作了! 
功能实现如下:

wxml

  1. <a wx:if="{{!item.isSelected}}" id="dianzan1" data-id = "{{item.id}}"
  2. bindtap="cool">
  3. <i class="iconfont icon-dianzan1 active"></i>
  4. <a wx:if="{{item.isSelected}}" id="dianzan1" data-id = "{{item.id}}"
  5. bindtap="cool">
  6. <i class="iconfont icon-dianzan1-copy active"></i>

在数据中,我不仅给了它一个ID,还给了它一个布尔值,并且全部定为false,这样便可以通过 
wx:if="{{!item.isSelected}}" wx:if="{{item.isSelected}}" 来判断展示的是点亮与否。

js

  1. cool:function(e) {
  2. let jobs = this.data.jobs
  3. for(let key in jobs){ // 遍历一遍数据
  4. // console.log(jobs[key].id);
  5. //将界面的数据与jobs的数据进行匹配
  6. if (jobs[key].id === e.currentTarget.
鲜花
鲜花
鸡蛋
鸡蛋 (2)

刚表态过的朋友 (2 人)

分享至 : QQ空间
收藏
原作者: 高枫