微信小程序常用代码(1)——tab切换

 <view class="font-bold tab-content">
      <!-- 循环列表 -->
      <block wx:for="{{jobList}}" wx:key="{{item.deptId}}">
           <!-- 点击时会触发事件viewDeptTwo ,并且携带数据(data-id)-->
           <!-- 当点击时候会触发函数,将标识符deptId转为item.deptId中的值,只有当标识符deptId==item.deptId时,才会显示on的样式 -->
           <view wx:if="{{item.deptId==1}}" class="{{item.deptId==deptId?‘on‘:‘‘}}" data-id="{{item.deptId}} " bindtap="viewDeptTwo">
              {{item.deptName}}
           </view>
      </block>
</view><!--当deptId为1时候显示当前的模板-->

 <view wx:if="{{deptId ==1}}">

 </view>

 

 <view wx:if="{{deptId ==2}}">

 </view>

  

 <view wx:if="{{deptId ==2}}">

 </view>

 

JS页面中 data中的数据

data: {
    jobList: [
      {
        deptId: 1,
        deptName: ‘院校实习‘
      },
      {
        deptId: 2,
        deptName: ‘兼职‘
      },
      {
        deptId: 3,
        deptName: ‘全职‘
      }
    ],
    deptId:1
  },

JS页面中的函数

viewDeptTwo: function (e) {
    this.setData({
      deptId: e.currentTarget.dataset.id     //当点击一个tab时,会触发此函数,
    })

原文地址:https://www.cnblogs.com/zhilili/p/12179541.html

时间: 2024-11-06 07:44:31

微信小程序常用代码(1)——tab切换的相关文章

小程序常用代码

微信小程序真的是谁做谁知道,还不如用原生js 阻止事件冒泡 <view bindtap="industry"> <view catchtap="industryCatchtap"> industryCatchtap这个方法不需要写,只要标注就行 </view> </view> 常用代码 // 取数据,data不能不写 this.data.xx // 更新数据,普通的值,对象里的对象 this.setData({ 'ca

微信小程序支付代码asp源码下载

昨天晚上给朋友写了一个asp的微信小程序支付接口,我这朋友的小程序服务器端用的asp做的,以前没有支付,非让我给写一个支付,因为必须是asp来写,他不会,所以我就帮他写了,顺便还写了一个asp获取用户资料头像和微信名入库的代码,也是asp源码,数据库用的是mdb的格式,还可以比较好用,微信小程序用asp做服务器端估计很少,应该有朋友需要,下载这个代码:ly.ftphn.com/wxpay.rar ============================================= 互相学习

微信小程序--常用的页面传值方式

记录小程序中常用的几种页面传值方式 一.storage wx.setStorage({ key: "key", data: value }) 通过getStorage回调方式获取data值,或者通过wx.getStorageSync(key) 同步获取key对应的data值 #### 二.url传值 url传值也是经常都能用到的 ##### 1.url传递通过字符串拼接传递key=value形式的参数 wx.navigateTo({ url: '/pages/index/index?i

微信小程序——常用快捷键【四】

格式调整 ctrl+[, ctrl+]:代码行缩进(向前|向后) ctrl+shift+[, ctrl+shift+] :折叠打开代码块 ctrl+C, ctrl+V:复制粘贴,如果没有选中任何文件则复制粘贴一行 shift+alt+F:代码格式化 alt+up, alt+down:上下移动一行 shift+alt+up, shift+alt+down:向上向下复制一行 ctrl+shift+Enter:在当前行上方插入一行 光标移动 ctrl+End:移动到文件结尾 ctrl+Home:移动到

微信小程序幻灯片代码

1.index.wxml文件 <!--index.wxml--> <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> <block wx:for="{{imgUrls}}"> <swipe

微信小程序常用事件

bind bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡. bindtap  跳转页面 bindchange  .value 改变时触发 change 事件 bindblur. 编辑器失去焦点时触发 bindinput  . 编辑器内容改变时触发 原文地址:https://www.cnblogs.com/ll15888/p/11479933.html

微信小程序常用的3种提示弹窗

1. 表示操作成功,文字上方会显示一个表示操作成功的图标. wx.showToast({ title: '操作成功!', // 标题 icon: 'success', // 图标类型,默认success duration: 1500 // 提示窗停留时间,默认1500ms }) 2.表示加载中,显示为加载中图标. wx.showToast({ title: '加载中...', icon: 'loading', duration: 1500 }) 3.不显示图标,一般用作提示. wx.showTo

webstorm开发微信小程序代码提醒(webstorm开发工具)

使用了微信提供的开发工具是真心难用,卡顿厉害.中英文切写注释换相当不爽.还没办法多开窗口,相信大家也遇到过这种现象. 下边我们介绍下webstorm来开发微信小程序的一些配置: 1.首先FileType下Cascading Style Sheet 添加*.wxss 1.png 2.FileType下HTML 添加*.wxml 2.png 3.将其中的wecharCode.jar下载下来,然后在webStorm 的 File -> import settings 中导入即可 3.png 配置已经完

微信小程序-整理各种小程序源码和资料免费下载

微信小程序整理下载 [小程序源码]微信小程序-车源宝微信版 [小程序源码]小程序-微赞社区(论坛demo) [小程序源码]微信小程序-收支账单 [小程序工具]微信小程序-日历 [小程序源码]小程序-在线聊天功能 [小程序源码]微信小程序-大好商城(新增功能天气查询和2048游戏) [小程序源码]微信小程序-查询号码归属地 [小程序源码]微信小程序-备忘录2 [小程序源码]微信小程序-QQ音乐 [小程序源码]小程序-货币汇率 [小程序源码]微信小程序-大学图书馆 [小程序源码]小程序-积分商城 [