微信小程序点击控件修改样式实例详解

2024-12-17 11:56:51

微信小程序点击控件修改样式实例详解

现在要在微信小程序中实现点击控件修改样式，如下：

微信小程序中不支持直接操作dom，要实现这种效果，我们需要通过设置data，然后利用数据和界面的双向绑定来实现它。

第一步：在wxss中定义被点击和未被点击的样式，如下：

.service_selection .is_checked{
 border: 1px solid #FE0002 ;
 color: #FE0002 ;
 background: #fff;
}
.service_selection .normal{
 border: none;
 color: #333;
 background: #F0F1EC;
}

第二步：在js文件中的data中设置一个flag,叫他isChecked，默认isChecked==false。如下：

data: {
  isChecked: false
 }

第三步：在wxml文件中绑定点击事件，

<view bindtap="serviceSelection"></view>

在js文件中实现这个方法，并另他点击后设置isChecked==true。如下：

serviceSelection(){
  this.setData({
   isChecked:true
  })
}

第四步：依然是在wxml文件中进行数据绑定：

<view class="{{isChecked?'is_checked':'normal'}}" bindtap="serviceSelection"></view>

重点是这一句代码

{{isChecked?'is_checked':'normal'}}"

这是一个三目运算符，当isChecked==true时，在class加上is_checked的样式，为flase时使用normal的样式。这一点的实现类似php控制样式类名的语法。

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

微信小程序 JS动态修改样式的实现代码

微信小程序这个坑啊,js动态修改样式,我们并不能用js或者jq 轻轻松松一行代码搞定.或者用removeClass addClass 来修改样式. 以下是一种动态修改样式的方法,原理是绑定数据,然后动态的修改数据,从而实现动态样式的改变而已.感觉有点········那个啥的,怪怪的.不过也没办法了.如果你有更好的方法,可以在评论区分享一下. test.wxml <view style="text-align: center;"> <label style="
微信小程序动态绑定事件并实现事件修改样式

微信小程序动态绑定事件并实现事件修改样式实例代码 wxml <scroll-view class="reportTypeScroll" scroll-x="true" scroll-left="{{toLeftNum}}"> <block wx:for-items="{{reportTypeList}}" wx:key="{{index}}"> <text type=&qu
微信小程序点击控件修改样式实例详解

微信小程序点击控件修改样式实例详解现在要在微信小程序中实现点击控件修改样式,如下: 微信小程序中不支持直接操作dom,要实现这种效果,我们需要通过设置data,然后利用数据和界面的双向绑定来实现它. 第一步:在wxss中定义被点击和未被点击的样式,如下: .service_selection .is_checked{ border: 1px solid #FE0002 ; color: #FE0002 ; background: #fff; } .service_selection .norm
微信小程序点击控件后选中其它反选实例详解

微信小程序点击控件后选中其它反选实例详解前言: 如果需要实现进来进行给按钮加上买一送一的样式,或者单击就选中单个按钮,只能靠css结合js进行控制了,小程序暂时没有这样的控件. 实现效果图: 微信小程序进来的时候自动进行按钮样式的初始化,这个需要一个字段做判断,加上正则表达式wxml文件: <block wx:for="{{liuliangItems}}"> <block wx:if="{{item.one2one == 1}}"> &l
微信小程序中子页面向父页面传值实例详解

微信小程序中子页面向父页面传值实例详解上面一张图是编辑款项页面,下面一张图是点击了编辑款项页面中选择好友的图标后打开的子页面.这个时候点选子页面的某个好友时,需要把好友的名字传递回编辑款项父页面. 采取的方法: 从页面路由栈中直接获取和操作目标Page对象,这种方式,是通过调用小程序的API: getCurrentPages(),来获取当前页面路由栈的信息,这个路由栈中按照页面的路由顺序存放着相应的Page对象,我们可以很容易的获取到上一级页面的完整Page对象,从而使直接调用Page对象的属
微信小程序页面跳转事件绑定的实例详解

微信小程序页面跳转事件绑定的实例详解什么是事件事件是视图层到逻辑层的通讯方式. 事件可以将用户的行为反馈到逻辑层进行处理. 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数. 事件对象可以携带额外信息,如 id, dataset, touches. 在组件中绑定一个事件处理函数. 如bindtap,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数 <view bindtap="view"> <text bindtap
微信小程序消息推送php服务器验证实例详解

微信小程序消息推送php服务器验证实例详解微信文档(靠下有个"接入指引"):https://mp.weixin.qq.com/debug/wxadoc/dev/api/custommsg/callback_help.html 设置页面("设置">>"开发设置"): https://mp.weixin.qq.com/wxopen/initprofile?action=home&lang=zh_CN 1.设置服务器域名比如:
微信小程序监听手势滑动切换页面实例详解

微信小程序监听手势滑动切换页面实例详解 1.对应的xml里写上手势开始.滑动.结束的监听: <view class="touch" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" ></view> 2.js: var touchDot = 0;//触摸时的原点 var time = 0;// 时
微信小程序本地缓存数据增删改查实例详解

微信小程序本地缓存数据增删改查实例详解数据如: var user = { name: 'Lion', sex: 'guy' } CRUD: // 添加 wx.setStorageSync('user', user); // 查询 var developer = (wx.getStorageSync('user') || []); // 更改 developer.name = 'Lion01'; wx.setStorageSync('user', user); // 删除 wx.removeSt
微信小程序request请求后台接口php的实例详解

微信小程序request请求后台接口php的实例详解后台php接口:http://www.vueyun.com/good/info 没有处理数据,直接返回了,具体再根据返回格式处理 public function getGoodInfo(Request $request) { $goods_datas = $this->Resource->get(); return response()->json(['status' => 'success','code' => 200,
微信小程序JS加载esmap地图的实例详解

一.在微信小程序里显示室内三维地图需要满足的两个条件调用ESMap室内地图需要用到小程序web-view组件,想要通过 web-view 调用ESMap室内地图需要满足以下 2 个条件: 1. 小程序是企业主体,微信 web-view 组件不对个人类型的小程序开放. 2. 您需要有一个自己的域名,在嵌入网页的时候需要在微信后台验证域名(只有自己域名下的网页才能被正确地显示哦,不能随便找一个公开链接). 二.具体实现步骤 1.域名验证: 由于微信平台的规定,web-view 指向的地址,必须是
微信小程序实现拖拽事件监听实例详解

微信小程序拖拽监听功能: 在软件开发或者 APP应用开发的时候,经常会遇到拖拽监听,最近自己学习微信小程序的知识,就想实现这样的拖拽效果,这里就记录下. 需要做个浮在scroll-view之上的button.尝试了一下. 上GIF: Android中也会有类似移动控件的操作.思路差不多.获取到位移的X Y 的变量,给控件设置坐标. 1.index.wxml ../images/gundong.png" bindtap="ballClickEvent" style="

微信小程序点击控件修改样式实例详解

相关推荐

随机推荐