小程序动态添加样式过程分析点击查看

发布日期:2020-2-20 22:23:18

本文江门程序开发主要介绍微信小程序点击查看动态添加样式的过程分析。本文将详细介绍示例代码,它对每个人的学习或工作都有一定的参考学习价值。您可以为您的朋友参考以下内容

小程序开发认为的基本逻辑:

1.为每个视图自定义dataindex属性,从0开始

2.定制一个名为selected的类作为所选样式

3.在wx.js中将viewid属性分配为0,以进行默认显示。

4.向每个视图添加一个单击事件选择,然后在单击一个视图时将dataindex更改为该视图的用户定义索引

5.在视图中添加一个三级木材运算符,以控制所选样式{{dataindex = = 0?'selected':'}}}

照片:

xml文件

<view bindtap="select" data-index= '0'>
   Well received
  </view>
  <view bindtap="select" data-index = '1'> 
   < View > < View > middle evaluation
  </view>
  <view bindtap="select" data-index ='2'>
   < View > < View > bad comments
  </view>
wsss

/*Expression box*/
 .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,因此默认情况下将切换第一个样式。

这样就完成了事件:

仍然有一些缺点。时间太短了。让我们暂时这样写。

以上是南京小程序开发今天带来本文的全部内容,希望对您的学习有所帮助,也希望对您的开发有所帮助。

选择拓胜小程序,让您的每一位客户更满意