zoukankan      html  css  js  c++  java
  • 小程序循环点击使用js添加css样式

    //wxml
    <block wx:for="{{Listsimg}}" wx:key='unique'>
        <block wx:if="{{index == clickId}}">
           <view class="img" style="border:{{border}};box-shadow:{{borders}}" id="{{index}}" bindtap="imgList" data-data="{{item}}">
               <image src="{{item.imgList}}" />
           </view>
        </block>
        <block wx:else>
           <view class="img" id="{{index}}" bindtap="imgList" data-data="{{item}}">
               <image src="{{item.imgList}}" />
           </view>
        </block>
    </block>
    //js
     data: {
          Listsumg: [
            {
              imgList: '../../images/1.jpg'
            },
            {
              imgList: '../../images/2.jpg'
            },
            {
              imgList: '../../images/3.jpg'
            }
          ],
          border:'',
          clickId:'',
          borders:''
    },
    imgList:function(e){
        console.log(this.data.imgLists[e.currentTarget.id])
        this.setData({
           border:"1rpx solid #eee",
           borders:'10rpx 10rpx 10rpx rgba(141, 161, 167, 0.9);',
           clickId:e.currentTarget.id
        })
     },
  • 相关阅读:
    数据库设计范式
    SQL 触发器
    SQL查询上月和本月两个月的语句
    angularjs学习总结 详细教程
    指令
    重复 HTML 元素
    AngularJS 数据绑定
    AngularJS 指令.
    AngularJS 数组
    AngularJS 对象
  • 原文地址:https://www.cnblogs.com/minghan/p/13266417.html
Copyright © 2011-2022 走看看