1.wxml中

<view class="column">
<view class="body-view {{num==1?'active':''}}" bindtap="bindChoice" data-num='1'>推荐</view>
<view class="body-view {{num==2?'active':''}}" bindtap="bindChoice" data-num='2'>热门</view>
<view class="body-view {{num==3?'active':''}}" bindtap="bindChoice" data-num='3'>分类</view>
</view>
2.js中
data{
   num:1
}
bindChoice:function(e){
   console.log(e);
   this.setData({
        num:e.target.dataset.num
})
}

小程序点击事件改变样式(普通js鼠标点击事件)的更多相关文章

  1. js 鼠标和键盘事件

    js 鼠标和键盘事件 鼠标事件 聚焦事件 离焦事件 鼠标单击和双击 鼠标的其他事件 鼠标事件对象 键盘事件 鼠标事件 聚焦事件 <input type="text" id=& ...

  2. js鼠标划过事件

    js鼠标划过事件一般有两对 onmouseover/onmouseout onmouseenter/onmouseleave 区别: 1.onmouseover/onmouseout 鼠标经过自身会触 ...

  3. 微信小程序radio组件 - 如何改变默认样式大小?

    今天在写小程序的时候用到radio组件,但是很懊恼并未提供修改radio组件大小属性,第一感觉准备用css width , height 改变radio的大小,但是怎么搞也无法改变. 但是又不愿意搞个 ...

  4. 微信小程序实现显示和隐藏控件-头像-取值-bindblur事件

    微信小程序实现显示和隐藏控件 .wxml: <view class=" {{showOrHidden?'show':'hidden'}}"></view> ...

  5. 微信小程序 text属性设置 WXSS样式

    >微信小程序的布局css样式 参考自  珺L 文字 width: fit-content;font-size:20px;      /*设置文字字号*/color:red;           ...

  6. 小程序获取地址授权的修改 wx.openSetting需点击

    开发者可以通过 wx.openSetting 接口来打开小程序设置界面并返回用户的设置结果.在原来的 wx.openSetting 接口中,我们允许开发者直接调用此接口,但目前我们发现有不少开发者滥用 ...

  7. 小程序echarts数据不改变,或者是一次渲染成功,第二次进入,渲染失败的解决办法

    1.引入echarts插件: import * as echarts from '../../ec-canvas/echarts'; 2.data中定义: ecBar: { onInit: initC ...

  8. 微信小程序入门四: 导航栏样式、tabBar导航栏

    实例内容 导航栏样式设置 tabBar导航栏 实例一:导航栏样式设置 小程序的导航栏样式在app.json中定义. 这里设置导航,背景黑色,文字白色,文字内容测试小程序 app.json内容: { & ...

  9. 微信小程序尺寸单位rpx以及样式相关介绍

    rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应.规定屏幕宽为750rpx.如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375p ...

随机推荐

  1. [转]otunnel:一个和lcx差不多的端口转发的工具

    这是一个采用Golang编写的和lcx差不多的端口转发的工具,用来突破内网环境 项目地址 ooclab/otunnel 下载地址(内涵各大平台) http://dl.ooclab.com/otunne ...

  2. 论文笔记:Attention Is All You Need

    Attention Is All You Need 2018-04-17 10:35:25  Paper:http://papers.nips.cc/paper/7181-attention-is-a ...

  3. [LightOJ 1370] Bi-shoe and Phi-shoe(欧拉函数快速筛法)

    题目链接: https://vjudge.net/problem/LightOJ-1370 题目描述: 给出一些数字,对于每个数字找到一个欧拉函数值大于等于这个数的数,求找到的所有数的最小和. 知识点 ...

  4. Codeforces-Anastasia and pebbles

    这是一道很有意思的(水)题. 地址戳:http://codeforces.com/problemset/problem/789/A 题目的大意呢,就是一个可爱的大姐姐的故事.说是啊,她每天都带着两个一 ...

  5. ASP.NET MVC AntiForgeryToken

    你开发一个网站,其中有个功能:新闻发布. 你是这样实现的: 1.保存新闻的方法是:/News/Save  POST提交 2.接受两个参数:title和content 有一天,你登录网站(浏览器会保存相 ...

  6. python基础实践 -python是一门动态解释性的强类型定义语言

    python是一门动态解释性的强类型定义语言 Python能做什么? Python是一门综合性的语言,你几乎能在计算机上通过Python做任何事情,以下是Python应该最广泛的几个方面: 1.网络应 ...

  7. appium长按按钮

    public static AndroidDriver driver; /长按操作:waitAction的参数单位是ms/ public static void longClick(String id ...

  8. 小tip: margin:auto实现绝对定位元素的水平垂直居中

    转载自:http://www.zhangxinxu.com/wordpress/?p=3794 一.绝对定位元素的居中实现 如果要问如何CSS实现绝对定位元素的居中效果,很多人心里已经有答案了. 兼容 ...

  9. .NetCore Session.Redis

    首先创建ASP.NET CORE Web项目,然后按如下顺序操作.1.添加nuget程序包: Microsoft.AspNetCore.Session; Microsoft.AspNetCore.Da ...

  10. 封装微信小程序支付

    <?php /** * User: Eden * Date: 2019/3/21 * 共有内容 */ namespace Common\Service; use Think\Exception; ...