微信小程序点击view动态添加样式过程解析

这篇文章主要介绍了微信小程序点击view动态添加样式过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

基本逻辑:

1.给每个view自定义dataIndex属性,从0开始

2.自定义一个名为selected的class,作为被选中后的样式

3.在wx.js中给viewId属性赋为0,用于默认显示。

4.给每个view添加一个点击事件select,在点击某个view时 将dataIndex变成这个view的自定义index

5.在view中添加一个三木运算符用于控制选中样式 {{dataIndex == 0 ? 'selected':''}}

附图:

wxml

<view class="ICONBOX {{viewId == 0 ? 'selected':''}} " bindtap="select" data-index= '0'>
   <view class="iconfont icon-haoping ic" ></view>好评
  </view>
  <view class="ICONBOX {{viewId == 1 ? 'selected':''}}" bindtap="select" data-index = '1'>
   <view class="iconfont icon-zhongping ic"></view>中评
  </view>
  <view class="ICONBOX {{viewId == 2 ? 'selected':''}}" bindtap="select" data-index ='2'>
   <view class="iconfont icon-bottom-comment ic"></view>差评
  </view>

wxss

/* 表情盒子 */
 .ICONBOX{
  border: 1px solid red;
  display: flex;
  justify-content: space-around;
  /* flex-direction: */
  align-items: center;
  color: #999;
  font-size: 28rpx;
 }
 .ic{
  margin-right: 5rpx;
 }
 .selected{
  color: #f63
 }

wxjs

 data: {

  viewId : 0
 },
 select:function(e){
  this.setData({
   viewId: e.currentTarget.dataset.index
  })
 },

由于viewId初始值是0,所以会默认第一个切换了样式。

这样就完成了该事件:

里面还有几个不足之处,时间仓促,暂且就这样写了。

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

(0)

相关推荐

  • 微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)

    微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案,cover-view不兼容,具体内容如下所示: 1.从微信小程序的官网扣下来的demo,实际测试中,发现6s ios10 系统不兼容,里面的内容出不来 <cover-view class="tab-bar"> <cover-view class="tab-bar-border"></cover-view> <cover-view wx:for=&

  • 微信小程序动态添加view组件的实例代码

    在web中,我们动态添加DOM,可以用jQuery的方法,很简单.在微信小程序中怎么实现下面这么需求. 其中,里程数代表上一行到这一行地方的距离(这个不重要):要实现的就是点击增加途径地,就多一行,删除途径地,就少一行. 分析:添加的和删除的是同样的结构,只是数量不一样,所以考虑循环,用列表表示,增加就往这个列表push一个,删除就从列表pop一个. 主要代码如下: <view class="weui-cell weui-cell_input"> <view clas

  • 微信小程序移动拖拽视图-movable-view实例详解

    JS中的sender参数(sender是事件的传值)前提是只有一个touch移动的时候.多个touch需要在 changedTouches 数组中查找 redclcik:function(sender){ wx.showModal({ title: '点击红色', content: '', }) console.log(sender); }, redmove:function(sender){ console.log(sender); // console.log(sender.changedT

  • 微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析

    前言 小程序支持webview以后,我们开发的好多h5页面,就可以直接在小程序里使用了,比如我们开发的微信商城,文章详情页,商品详情页,就可以开发一套,多处使用了.我们今天来讲一讲.在小程序的webview里实现微信支付功能.因为微信不允许在小程序的webview里直接调起微信支付.所以我们这节课就要涉及到小程序和webview的交互了. 老规矩先看效果. 因为这里涉及的东西比较多,录gif太多,没法上传,我就录制了一段视频出来. https://v.qq.com/x/page/t0913ipr

  • 微信小程序 scroll-view 水平滚动实现过程解析

    1. scroll-view水平滚动使用 1. wxml <scroll-view class="scroll-wrap" scroll-x> <view class="scroll-view-item"> <view class="scroll-img-wrap scroll-major-img-wrap"> <image src="../../images/wukecheng@2x.png&

  • 详解解决小程序中webview页面多层history返回问题

    小程序开发中遇到的问题:小程序中嵌套了一个webview页面,webview页面中有静默授权(A1页面静默授权后重定向到A2页面),点小程序原生的返回按钮会返回到A1页面,然后页面就会反复静默授权 预期表现:点小程序原生的返回按钮后返回到小程序上个页面 解决方案:通过history.pushState添加历史记录名目,history.onpopstate监听历史记录条目发生变化时,调用小程序APIwx.navigateBack window.addEventListener('popstate'

  • 微信小程序与webview交互实现支付功能

    实现原理:点击h5网页的支付按钮--(跳转)-->嵌套改h5的小程序的支付页面--(处理支付)-->跳转至支付完成后的页面 注意:(1)网页h5中,引入微信的jssdk <script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.3.2.js"></script> (2)小程序嵌套h5页面后,需要在微信公众平台配置h5网页的业务逻辑名,否则无法访问(且

  • 微信小程序webview 脚手架使用详解

    项目地址 https://github.com/fangkyi03/wechat-webview-template 项目介绍 1.wechat 使用taro创建的初始化项目 2.react-ssr-h5 使用nextjs创建的项目 已经做好完整的兼容处理 使用vw vh为单位 简单介绍 因小程序对于webview通信做出的限制 从webview发起的postMessage并不会实时的被小程序端接受到 详情可见 :https://developers.weixin.qq.com/miniprogr

  • 微信小程序webview与h5通过postMessage实现实时通讯的实现

    在做 React Native 应用时,如果需要在 App 里面内嵌 H5 页面,那么 H5 与 App 之间可以通过 Webview 的 PostMessage 功能实现实时的通讯,但是在小程序里面,虽然也提供了一个 webview 组件,但是,在进行 postMessage 通讯时,官方文档里面给出了一条很变态的说明: 网页向小程序 postMessage 时,会在特定时机(小程序后退.组件销毁.分享)触发并收到消息.e.detail = { data },data 是多次 postMess

  • 微信小程序点击view动态添加样式过程解析

    这篇文章主要介绍了微信小程序点击view动态添加样式过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 基本逻辑: 1.给每个view自定义dataIndex属性,从0开始 2.自定义一个名为selected的class,作为被选中后的样式 3.在wx.js中给viewId属性赋为0,用于默认显示. 4.给每个view添加一个点击事件select,在点击某个view时 将dataIndex变成这个view的自定义index 5.在view中

  • 微信小程序点击按钮动态切换input的disabled禁用/启用状态功能

    做微信小程序项目的时候遇到一个功能,个人信息资料的修改与保存.以下是说明及简化后的代码: 1.页面加载完成时,所有input处于禁用状态: 2.点击编辑按钮时,文字切换成"保存",身份证input保持始终不可修改状态(即禁用), 姓名input可以修改(即动态加载切换禁用/启用): 3.再次点击按钮文字切回"编辑",所有input变为禁用状态. 以下是wxml部分 <view class="btn"> <button bindt

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

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

  • 微信小程序全局变量GLOBALDATA的定义和调用过程解析

    这篇文章主要介绍了微信小程序全局变量GLOBALDATA的定义和调用过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 一.在小程序文件app.js里面定义全局变量 二.在页面上使用或修改 在页面中引入 调用全局变量值 改变全局变量值 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们.

  • 微信小程序实现给循环列表添加点击样式实例

    微信小程序实现给循环列表添加点击样式实例 微信小程序有个属性hover-class='active',是指当点击列表元素时当按下鼠标左键会显示active样式,但是鼠标离开样式就会复原.可以参考以下解决方案,直接上代码: wxml: <view class="taga"> <view class="tag-title">标签</view> <view class="tag-box"> <vie

  • 微信小程序 动态绑定数据及动态事件处理

    微信小程序 动态绑定数据及动态事件处理 关键核心代码 <image class="midimage" data-Type="{{item.Type}}" data-BillCode="{{item.BillCode}}" data-src="{{item.imgurl}}" src="{{item.imgurl}}" mode="scaleToFill" bindtap="

  • 微信小程序 input输入及动态设置按钮的实现

    微信小程序 input输入及动态设置按钮的实现 [需求]实现当手机号已填写和协议已勾选时,"立即登录"按钮变亮,按钮可点击:若有一个不满足,按钮置灰,不可点击:实现获取短信验证码,倒计时提示操作:对不满足要求内容进行toast弹窗提示. <view class="container"> <!--手机号--> <view class="section"> <text class="txt"

  • 微信小程序基于slider组件动态修改标签透明度的方法示例

    本文实例讲述了微信小程序基于slider组件动态修改标签透明度的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml <view class="img" style="opacity:{{imgOpacity}}"></view> <slider min="0" max="1" step="0.1" show-value value=&quo

  • 微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能

    1.多张图片循环渲染后预览.保存.识别带参数二维码 wxml页面 <view wx:for="{{imgalist}}" wx:for-item="image" class="previewimg"> <image src="{{image}}" data-src="{{image}}" bindtap="previewImage"></image>

  • 微信小程序点击顶部导航栏切换样式代码实例

    这篇文章主要介绍了微信小程序点击顶部导航栏切换样式代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 类似这样的效果 <view class='helpCateList'> <!-- 类别 --> <scroll-view class='scroll-view' scroll-x="true"> <view class="item-content" wx:key=&qu

随机推荐