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>

     
  • 相关阅读:
    博客园精华集汇总
    SQLServer中临时表与表变量的区别分析
    【转】InstantClient安装使用
    博客人生
    【Sniffer】如何查看Sniffer截获的数据内容
    Excel使用基础
    书和耳机到了
    MindManager Pro 9.1.157更改默认字体
    xml spy中显示文件路径
    【LR】Error 27191: "web_image_check" failed 报错解决方法
  • 原文地址:https://www.cnblogs.com/gerry/p/8108579.html
Copyright © 2011-2022 走看看