zoukankan      html  css  js  c++  java
  • 微信小程序 单选框

    //index.wxml

    <view class="item">
       <p>单选</p>
       <block wx:for="{{box}}" wx:for-item="box" wx:for-index="index">
         <view wx:if="{{choose==index}}">
           <view bindtap="choose" data-index="{{index}}" class="box_choose box">{{box.name}}</view>
         </view>
         <view wx:else="{{choose==index}}">
           <view bindtap="choose" data-index="{{index}}" class="box">{{box.name}}</view>
    </view>
        </block>
        </view>

    index.wxss

    .item {
      padding-top: 15%;
      margin-top: 5%;
      position: relative;
      display: -webkit-flex;
    }
    .item p {
      position: absolute;
      color: #adadad;
      top: 10%;
      left: 10%;
    }
    .item view {
      margin: 5%;
      flex: 1;
    }
    .box {
      150rpx;
      height: 150rpx;
      text-align: center;
      padding-top: 35%;
      border: 1px solid black;
      border-radius: 4px;
      box-sizing: border-box;
    }
    .box_choose {
      background-color: #4889fe;
      color: white;
      border-color: white;
    }

    //index.js

    Page({
      data: {
        box: [
          {
            name: 'box1-1',
            id: 0,
            class: ''
          },
          {
            name: 'box1-2',
            id: 1,
            class: ''
          },
          {
            name: 'box1-3',
            id: 2,
            class: ''
          }
        ],
        box2: [
          {
            name: 'box2-1',
            id: 0,
            class: ''
          },
          {
            name: 'box2-2',
            id: 1,
            class: ''
          },
          {
            name: 'box2-3',
            id: 2,
            class: ''
          }
        ],
        choose: -1,
        choose2: -1
      },
      onLoad: function (options) {
        // 页面初始化 options为页面跳转所带来的参数
        var that = this;
        box2 = that.data.box2;
        // console.log(box);
      },
      onReady: function () {
        // 页面渲染完成
        wx.setNavigationBarTitle({
          title: '选择',
          success: function (res) {
            // success
          }
        })
      },
      onShow: function () {
        // 页面显示
      },
      onHide: function () {
        // 页面隐藏
      },
      onUnload: function () {
        // 页面关闭
      },
      choose: function (evnet) {
        console.log(event.data.msg.data.data.data.currentTarget.dataset.index);
        // var index = event.data.msg.data.data.data.currentTarget.dataset.index;
        var that = this;
        if (event.data.msg.data.data.data.currentTarget.dataset.index == that.data.choose) {
          that.setData({
            choose: -1
          });
        } else {
          that.setData({
            choose: event.data.msg.data.data.data.currentTarget.dataset.index
          });
        }
      }
    })

  • 相关阅读:
    Drupal Coder 模块远程命令执行分析(SA-CONTRIB-2016-039)
    Python 实现 ZoomEye API SDK
    程序员互动联盟第一届编码大赛第二题解题分享
    python中各进制之间的转换
    记一次ctf比赛解密题的解决(可逆加密基本破解之暴力破解)
    使用JsonConfig控制JSON lib序列化
    openMRS项目
    Harmonic Number(调和级数+欧拉常数)
    Pairs Forming LCM(素因子分解)
    Uva 11395 Sigma Function (因子和)
  • 原文地址:https://www.cnblogs.com/panlaixing/p/6552910.html
Copyright © 2011-2022 走看看