微信小程序框架wepy之动态控制类名

2024-07-28 19:51:08

本文为大家分享了微信小程序框架wepy之动态控制类名的具体实现方法，供大家参考，具体内容如下

控制类名

style

<style lang="less" scoped>
  .liBkgCor {
   background-color: red;
  }
</style>

template

<view class="t_tab">
 <li @tap.stop="changeLi({{1}})" class="{{ liColor == 1 ? 'liBkgCor':'' }}">推荐</li>
 <li @tap.stop="changeLi({{2}})" class="{{ liColor == 2 ? 'liBkgCor':'' }}">洗手台</li>
 <li @tap.stop="changeLi({{3}})" class="{{ liColor == 3 ? 'liBkgCor':'' }}">淋浴</li>
 <li @tap.stop="changeLi({{4}})" class="{{ liColor == 4 ? 'liBkgCor':'' }}">马桶</li>
</view>

script

 data = {
   liColor:1 //默认让第一个tab高亮
  }
  methods = {
   changeLi(e){
    this.liColor = e.target.dataset.wepyParamsA
    this.$apply() //通知wepy框架data数据更改需要重绘页面
   }
  }

效果图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

微信小程序如何像vue一样在动态绑定类名

小程序开发中遇到这样一个问题... 排行榜开发的时候,前三名的样式不同,其余的样式一样.但是都是通过同一元素来遍历的,当时卡了一下.后来发现有module模块化这一概念,于是查了下api,一下子就做出来了. 就是不同名次上边的样式根据实际情况展示效果. 模块化我们可以将一些公共的代码抽离成为一个单独的 js 文件,作为一个模块.模块只有通过 module.exports 或者 exports 才能对外暴露接口. 通俗的将就是自身独立,作用域只作用于该模块,与js互不影响. 主要代码 modu
微信小程序框架wepy之动态控制类名

本文为大家分享了微信小程序框架wepy之动态控制类名的具体实现方法,供大家参考,具体内容如下控制类名 style <style lang="less" scoped> .liBkgCor { background-color: red; } </style> template <view class="t_tab"> <li @tap.stop="changeLi({{1}})" class="
详解微信小程序框架wepy踩坑记录（与vue对比）

wepy框架借鉴了vue的语法风格和功能特性,但是在使用过程中还是发现与vue有很大的不同.现在总结一下自己开发中遇到的问题,共大家参考一下.如果第一次用wepy开发,强烈建议仔细阅读一下这篇文章,一定对你有帮助,会帮你节约很多宝贵的时间.开发过程中也建议大家时不时的回来阅读一次,巩固加强记忆. wepy中的组件组件里面的坑还不是一般的多! 首先来说说组件间的数据共享.在vue中你也能做到这一点,只要把 data 写成一个对象就可以了,当然你不想让所有的子组件都共享同一份数据,vue中的解决方
微信小程序框架的页面布局代码

1.首先下载小程序开发工具 2.小程序中的wxml就相当于html , wxss就相当于css 3.布局和html布局几乎一样 4.宽度使用百分比 5.input框里的文字上下居中是用padding撑出来的 6.最下面的文字靠右,view相当于一个块元素,设定宽度后,text-align右对齐简单的测试界面如图 index.wxml代码  <view class="container"> <text class=&quo
微信小程序框架详解及实例应用

快速了解微信小程序的使用,一个根据小程序的框架开发的todos app 微信官方已经开放微信小程序的官方文档和开发者工具.前两天都是在看相关的新闻来了解小程序该如何开发,这两天官方的文档出来之后,赶紧翻看了几眼,重点了解了一下文档中框架与组件这两个部分,然后根据简易教程,做了一个常规的todo app.这个app基于微信小程序的平台,实现了todo app的常规功能,同时为了让它更接近实际的工作场景,也用到了loading与toast这两个组件来完成一些操作的交互与反馈.这个平台给我的直观感受是
微信小程序wepy框架笔记小结

该框架是腾讯内部基于小程序的开发框架,设计思路基本参考VUE,开发模式和编码风格上80%以上接近VUE 优势组件化开发小程序虽然有标签可以实现组件复用,但仅限于模板片段层面的复用,业务代码与交互事件仍需在页面处理.无法实现组件化的松耦合与复用的效果. wepy组件示例 // index.wpy <template> <view> <panel> <h1 slot="title"></h1> </panel>
微信小程序下载工具及调试详解

昨天晚些时候微信团队发布了微信小程序开发者工具.微信小程序开发文档和微信小程序设计指南,全新的开发者工具,集成了开发调试.代码编辑及程序发布等功能,帮助开发者简单和高效地开发微信小程序.以下是官方文档,内含小程序开发者工具下载地址及调试指南. 下载地址:开发者工具0.9.092300版 windows 64版:windows 32版:mac版为了帮助开发者简单和高效地开发微信小程序,我们推出了全新的开发者工具,集成了开发调试.代码编辑及程序发布等功能. devtools 扫码登录启动工具时,
详解微信小程序开发框架（MINA）

小程序MINA框架,及优点 MINA框架: 小程序使用的是MINA框架,目的是通过简单.高效的方式让开发者可以在微信中开发具有原生App体验的服务. MINA的核心是一个响应的数据绑定系统. 整个系统分为两块:视图层(view,描述语言wxml和wxss)和逻辑层(App Serice,基于 JavaScript).这可以让数据与视图非常简单的保持同步.当做数据修改时,只需要在逻辑层改数据,视图层就会做响应的更新.开发者只需要将页面路由.方法.生命周期函数注册进框架,其他的一切复杂的操作都将由框
微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤

本文介绍了微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤,分享给大家,具体如下: 微信小程序框架:mpvue ui框架:mpvue-weui request请求:fly.js 1.项目初始化注:如果没有安装node环境的请先去网上下载node.js下来安装,安装后默认安装npm了接下到你要建项目的目录下打开cmd窗口(快捷方法:打开到目录后按住键盘shift,然后点击鼠标右键选择在此处打开powershell窗口即可) npm默认从外网下载包,可能会比较慢,可以换
微信小程序第三方框架对比之 wepy / mpvue / taro

众所周知如今市面上端的形态多种多样,手机Web.ReactNative.微信小程序, 支付宝小程序, 快应用等,每一端都是巨大的流量入口,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端去编写多套代码的成本显然非常高,这时候只编写一套代码就能够适配到多端的能力就显得极为需要. 但面对目前市面上成熟的小程序第三方框架如何针对自己的需求进行选择也是一个麻烦事,本文针对当前市面上的三大转译框架进行一个综合对比,希望能对大家的技术选择有所帮助,如有哪里不妥的地方希望指正; 小程序开发有哪些痛点
微信小程序 wepy框架与iview-weapp的用法详解

最近在弄wepy的时候在想有没有什么ui比较合适一点的wepy的,也是在网上看了好久发现iview还不错.引用简单,上手超快,组件绚丽!当然,这里还介绍下微信官方建议的框架也是和不错的,有需要的可以看看(https://github.com/Tencent/weui-wxss),这里主要做view-weapp的介绍小程序相关项目 1.wepy项目 https://github.com/Tencent/wepy 2.iview-weapp https://weapp.iviewui.co

微信小程序框架wepy之动态控制类名

相关推荐

随机推荐