zoukankan      html  css  js  c++  java
  • 小程序radio-group切换

    <style>
    .transactiondetails-box {
      100%;
      height: 100%;
      overflow: hidden;
    }
    .transactiondetails-centent{ 100%; display: flex; justify-content:space-around; justify-content: flex-start;}
    radio-group{
      100%;
     border-bottom: 1px solid #f0f0f0;
    }
    .flex_box{
     display: flex;
      100%;
     background: #fff;
    }
    .flex_item{
     flex: 1;
     text-align: center;
    }
    .flex_item label{
     padding: 10px 0;
     display: inline-block;
      50%;
    }
    .flex_item label.active{
     color: #000000;
     border-bottom: 2px solid #8dbd53;

    }
    .radio-centent{ 100%; height: 100px; }
    </style>
    <template type="wxml">
      <view class="transactiondetails-box">
         <view class="transactiondetails-centent">
           <radio-group bindchange="radioCheckedChange">
                  <view class="flex_box">
                   <view class="flex_item">
                        <label class="{{radioCheckVal==0?'active':''}}">全部
                         <radio value="0"  hidden="true"></radio>
                        </label>
                   </view>
                   <view class="flex_item">
                    <label class="{{radioCheckVal==1?'active':''}}">收入
                     <radio value="1" hidden="true"></radio>
                    </label>
                   </view>
                   <view class="flex_item">
                    <label class="{{radioCheckVal==2?'active':''}}">支出
                     <radio value="2" hidden="true"></radio>
                    </label>
                   </view>
                  </view>
             </radio-group>


    </view>
    <view class="radio-centent">
             <view wx:if="{{ radioCheckVal==0}}">
               11111
             </view>
             <view wx:if="{{ radioCheckVal==1}}">
               2222
             </view>
             <view wx:if="{{ radioCheckVal==2}}">
              3333
             </view>
    </view>

      </view>

    </template>
    <script>
    import wepy from 'wepy';

    export default class transactiondetails extends wepy.page {

      config = {
        navigationBarTitleText: '交易明细'
      };
      components = {};

      data = {


      };
      methods = {};

      events = {};
      radioCheckedChange(e) {
        this.setData({
       radioCheckVal:e.detail.value
      })
      }
      onLoad() {};
      // Other properties
    }

    </script>

     
  • 相关阅读:
    thinkphp6查询表达式使用between问题
    机器学习纸质作业1
    磁盘挂载
    SQL Server开启READ_COMMITTED_SNAPSHOT
    视觉开发-相机镜头选型
    使用logstash出现报错com.mysql.jdbc.Driver not loaded. Are you sure you've included the correct jdbc driver in :jdbc_driver_library
    linux安装tomcat(转自https://blog.csdn.net/fukai8350/article/details/80467224)
    linux 安装java(转自https://www.cnblogs.com/wjup/p/11041274.html)
    如何统计自动化测试用例的ROI 【投入产出比/投资回报率】
    老男孩老师的博客地址
  • 原文地址:https://www.cnblogs.com/gerry/p/8108579.html
Copyright © 2011-2022 走看看