欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

小程序實現(xiàn)多選框功能

 更新時間：2018年10月30日 09:04:11   作者：wxfdpp  
這篇文章主要為大家詳細介紹了小程序實現(xiàn)多選框功能，小程序實現(xiàn)單選全選多選刪除操作，具有一定的參考價值，感興趣的小伙伴們可以參考一下

最近寫小程序的時候，遇到多選框的問題！并不是多選框不好操作，而是小程序的多選框實在太丑了好嗎！本來的初衷是想修改一下默認樣式就OK了，從邊框 寬度 到背景 卻在最后選擇出來的額icon上無從下手！沒辦法自己手寫checked的效果采用的是icon圖標。感興趣的可以往下看看！

先來看看效果圖

實現(xiàn)的原理也非常的簡單，數(shù)據(jù)渲染到列表，綁定事件修改列表項的checked屬性，不建議直接操作data的數(shù)據(jù)，當要操作的時候可以定義一個局部變量，局部操作完成后，在賦值給data，利用數(shù)據(jù)雙向綁定的特性，就完成所有的操作

wxml

<view class='header1'>
 <view class='header'>
  <view class='header_con flex_between'>
   <view class='left'>
    共計{{items.length}}件商品
   </view>
   <view class='right flex_end'>
    <view wx:if="{{!management_good}}" class='flex_center' bindtap='management'>
     管理
    </view>
    <view wx:if="{{management_good}}" class='flex_center' bindtap='finish_management'>
     完成
    </view>
   </view>
  </view>
 </view>
</view>
<view class='header2'>
 <view class='header'>
  <view class='header_con flex_between'>
   <input value='類目一' disabled='{{title_disabled}}' focus="{{!title_disabled}}">
   </input>
   <view class='right flex_end'>
    <block wx-if="{{title_disabled}}">
     <image src='../../../image/hotel/delete.png' bindtap='change_classname'></image>
    </block>
    <block wx-if="{{!title_disabled}}">
     <view class='flex_center' bindtap='finish_classname'>
      完成
     </view>
    </block>
   </view>
  </view>
 </view>
</view>
<view class='onlinechoose'>
 <view class='hotel_list flex_center' wx:for="{{items}}" wx:key="items" wx:for-item="i" data-id="{{index}}" bindtap='select'>
  <view class='list_cons flex_start'>
   <view wx:if="{{management_good}}" class='lefts'>
    <block wx-if="{{!i.checked}}">
     <view class='icon_none'></view>
    </block>
    <block wx-if="{{i.checked}}">
     <icon type="success" size="30" color="red" />
    </block>
   </view>
   <image src='../../../image/hotel/demoimg.jpg'></image>
   <view class='right'>
    <view class='name'>
     {{i.name}}
    </view>
    <view class='list1 flex_between'>
     <view class='left'>
      <view class='condition1'>
       16㎡|雙人床|含早
      </view>
      <view class='condition2'>
       <block>
        間數(shù)：10
       </block>
       <block>
        間數(shù)：2
       </block>
      </view>
     </view>
    </view>
    <view class='list1 flex_between'>
     <view class='left'>
      <view class='condition2'>
       類目一
      </view>
     </view>
    </view>
   </view>
  </view>
 </view>
</view>
<view class='bottom flex_between' wx:if="{{management_good}}">
 <view class='left flex_start'>
  <block wx:if="{{select_all}}">
   <view bindtap='select_none' class='flex_start'>
    <icon type="success" size="30" color="red" />
    <view>
     取消全選
    </view>
   </view>
  </block>
  <block wx:if="{{!select_all}}">
   <view bindtap='select_all' class='flex_start'>
    <view class='select_none'>
    </view>
    <view>
     全選
    </view>
   </view>
  </block>
 </view>
 <view class='right flex_end'>
  <view style='text-align:right'>
   <view class='all'>
    共選中{{middlearr.length}}件商品
   </view>
  </view>
  <view bindtap='deleteitem' class='sure'>
   刪除
  </view>
 </view>
</view>

下面是我的代碼 由于wxss我是在app.wxss和當前文件都有的沒太多的整理全都貼上去了，在這里多說一句小程序是支持彈性布局的，當你命名好幾個彈性盒子的類名后，將會發(fā)現(xiàn)css將會減少很大的工作量

wxss

.header1{
 background-color: #f5f5f5;
}
.header2{
 background-color: #ffffff;
}
.header {
 width: 100%;
 height: 80rpx;
 border-bottom: 1rpx solid #d6d6d6;
}
.header .header_con {
 width: 700rpx;
 height: 80rpx;
 margin: 0 auto;
 color: #333;
 font-size: 30rpx;
}
.header .header_con image{
 width: 44rpx;
 height: 44rpx;
}
.header .header_con .right{
 color: #ff4965;
}
.bottom{
 width: 100%;
 height: 100rpx;
 border-top: 1rpx solid #d6d6d6;
 background-color: #fff;
 position: fixed;
 left: 0rpx;
 bottom: 0rpx;
}
.bottom .left{
 margin-left: 25rpx;
}
.bottom .left .select_none{
 width: 60rpx;
 height: 60rpx;
 border: 1rpx solid #d6d6d6;
 border-radius: 50%;
}
.bottom .right .all{
 color: #ff830f;
 font-size: 26rpx;
}
.bottom .right .gray{
 color: #666666;
 font-size: 22rpx;
}
.bottom .right .sure{
 margin-left: 22rpx;
 width: 220rpx;
 height: 100rpx;
 line-height: 100rpx;
 text-align: center;
 background-color: #ff4965;
 color: #fff;
}

/*列表*/
.onlinechoose{
 width: 750rpx;
 margin-top: 15rpx;
 background-color: #ffffff;
 font-size: 32rpx;
}
.onlinechoose .hotel_list{
 width: 750rpx;
 height: 260rpx;
 border-bottom: 1rpx solid #d6d6d6;
 background-color: #ffffff;
}
.onlinechoose .hotel_list .icon_none{
 width: 60rpx;
 height: 60rpx;
 border: 1rpx solid #d6d6d6;
 border-radius: 50%;
}
.onlinechoose .hotel_list .list_cons{
 width: 700rpx;
 height: 200rpx;
}
.onlinechoose .list_cons .lefts{
 width: 80rpx;
}
.onlinechoose .list_cons image{
 width: 200rpx;
 height: 200rpx;
 margin-right: 25rpx;
}
.list_cons .right{
 width: 395rpx;
 height: 200rpx;
}
.list_cons .right .name{
 font-size: 32rpx;
 color: #333333;
 font-weight: 700;
 letter-spacing: 3rpx;
 margin-bottom: 20rpx;
}
.list_cons .right .list1{
  margin-bottom: 17rpx;
}
.list_cons .right .list1 .condition1{
 font-size: 28rpx;
 color: #999999;
 margin-bottom: 15rpx;
}
.list_cons .right .list1 .condition2{
 font-size: 24rpx;
 color: #999999;
}
.list_cons .right .list1 .act{
 color: #2d8622;
}
.list_cons .right .list1 .r{
 font-size: 24rpx;
 color: #ff4965;
}
.list_cons .right .list1 .big{
 font-size: 32rpx;
}
.list_cons .right .lists2{
 height: 36rpx;
  line-height: 36rpx;
  font-size: 22rpx;
}
.list_cons .right .lists2 .left{
 width: 162rpx;
 text-align: center; 
 color: #ff4965;
 border: 1rpx solid #ff4965;
 box-sizing: border-box;
 border-radius: 5rpx;
}
.list_cons .right .lists2 .right2{
 color: #999999;
}
.flex_center{
 display: flex;
 display: -webkit-flex;
 justify-content: center;
 align-items: center;
}
.flex_between{
 display: flex;
 display: -webkit-flex;
 justify-content: space-between;
 align-items: center;
}
.flex_start{
 display: flex;
 display: -webkit-flex;
 justify-content: flex-start;
 align-items: center;
}
.flex_end{
 display: flex;
 display: -webkit-flex;
 justify-content: flex-end;
 align-items: center;
}

js

js純手寫雖然不太好吧！但是功能實現(xiàn)了，萬惡 的checkbox魔鬼
初始化

data: {
  imgUrl: imgUrl,
  title_disabled:true,//控制修改表頭名字
  management_good:false,
  select_all:false,
  middlearr:[],
  items: [
   { name: '1', checked: false},
   { name: '2', checked: false},
   { name: '3', checked: false},
   { name: '4', checked: false},
   { name: '5', checked: false},
   { name: '6', checked: false},
  ],
 },
 // 改變類目的名字
 change_classname:function(){
   let that = this;
   that.setData({
    title_disabled: !that.data.title_disabled,
   });
  // 這里自動獲取焦點
 },
 finish_classname: function () {
  let that = this;
  that.setData({
   title_disabled: !that.data.title_disabled,
  })
 },
 // 管理商品
 management:function(){
  let that = this;
  that.setData({
   management_good: true,
  })
 },
 finish_management:function(){
  let that = this;
  that.setData({
   management_good:false,
  })
 },
 // 選擇
 select:function(e){
  var that = this;
  let arr2 = [];
  if (that.data.management_good == false){
    return;
  }else{
   var arr = that.data.items;
   var index = e.currentTarget.dataset.id;
   arr[index].checked = !arr[index].checked;
   console.log(arr);

   for(let i=0;i<arr.length;i++){
     if(arr[i].checked){
      arr2.push(arr[i])
     }
   };
   that.setData({
    items: arr,
    middlearr:arr2
   })
  }
 },
 // 刪除
 deleteitem:function(){
  var that = this;
  let arr = that.data.items;
  let arr2 = [];
  console.log(arr);
  for(let i=0;i<arr.length;i++){
   if (arr[i].checked == false){
    arr2.push(arr[i]);
   }
  }
  that.setData({
   items:arr2,
   middlearr:[]
  })
 },
 // 全選
 select_all:function(){
  let that = this;
  that.setData({
   select_all: !that.data.select_all
  })
  if (that.data.select_all){
   let arr = that.data.items;
   let arr2 = [];
   for (let i = 0; i < arr.length; i++) {
    if (arr[i].checked == true) {
     arr2.push(arr[i]);
    }else{
     arr[i].checked = true;
     arr2.push(arr[i]);
    }
   }
   that.setData({
    items: arr2,
    middlearr:arr2
   })
  }
 },
 // 取消全選
 select_none:function(){
  let that = this;
  that.setData({
   select_all: !that.data.select_all
  })
  let arr = that.data.items;
  let arr2 = [];
  for (let i = 0; i < arr.length; i++) {
    arr[i].checked = false;
    arr2.push(arr[i]);
  }
  that.setData({
   items: arr2,
   middlearr:[]
  })
 },

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關文章

  • 七行JSON代碼把你的網(wǎng)站變成移動應用過程詳解

    七行JSON代碼把你的網(wǎng)站變成移動應用過程詳解

    這篇文章主要介紹了七行JSON代碼把你的網(wǎng)站變成移動應用過程詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值
    2019-07-07
  • Kibo 用于處理鍵盤事件的Javascript工具庫

    Kibo 用于處理鍵盤事件的Javascript工具庫

    Kibo是一個簡單的用于處理鍵盤事件的Javascript工具庫。
    2011-10-10
  • javascript格式化json顯示實例分析

    javascript格式化json顯示實例分析

    這篇文章主要介紹了javascript格式化json顯示,實例分析了javascript操作json格式化的相關技巧,非常具有實用價值,需要的朋友可以參考下
    2015-04-04
  • 老生常談javascript?hash的使用

    老生常談javascript?hash的使用

    在javascript中，hash指的是哈希表，是一種根據(jù)關鍵字直接訪問內(nèi)存存儲位置的數(shù)據(jù)結構，hash就是一個賦值的方法，但實際用的并不需要太復雜，能用的就一點點，寫法也非常簡單，hash有多種寫法，本文給大家介紹javascript?hash使用，感興趣的朋友一起看看吧
    2023-10-10
  • 微信小程序實現(xiàn)文章關注功能詳細流程

    微信小程序實現(xiàn)文章關注功能詳細流程

    在社交小程序里有個常見的場景是關注功能，我們本篇以關注已經(jīng)發(fā)布的文章為例，講解一下關注功能如何實現(xiàn)
    2022-08-08
  • 在uni-app中踩過的坑及解決

    在uni-app中踩過的坑及解決

    這篇文章主要介紹了在uni-app中踩過的坑及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2023-04-04
  • JavaScript閉包與作用域鏈實例分析

    JavaScript閉包與作用域鏈實例分析

    這篇文章主要介紹了JavaScript閉包與作用域鏈,結合實例形式分析了javascript閉包的具體概念、功能、并對比作用域鏈分析了閉包的相關使用技巧與注意事項,需要的朋友可以參考下
    2019-01-01
  • JavaScript constructor和instanceof,JSOO中的一對歡喜冤家

    JavaScript constructor和instanceof,JSOO中的一對歡喜冤家

    現(xiàn)在流行面向對象,JavaScript當然要迎頭趕上. 有說法JavaScript就是徹頭徹尾的OO語言,但我覺得JavaScript實現(xiàn)面向對象的程序還是有諸多不便的.
    2009-05-05
  • JavaScript實現(xiàn)帶箭頭標識的多級下拉菜單效果

    JavaScript實現(xiàn)帶箭頭標識的多級下拉菜單效果

    這篇文章主要介紹了JavaScript實現(xiàn)帶箭頭標識的多級下拉菜單效果,可實現(xiàn)橫向與縱向箭頭的形式標識選中菜單項位置的功能,涉及javascript針對頁面元素位置的判定與樣式動態(tài)操作技巧,需要的朋友可以參考下
    2015-08-08
  • 用JavaScript實現(xiàn)PHP的urlencode與urldecode函數(shù)

    用JavaScript實現(xiàn)PHP的urlencode與urldecode函數(shù)

    這篇文章主要介紹了用JavaScript實現(xiàn)PHP的urlencode與urldecode函數(shù),很多情況下我們用了出來php urlencode出來的網(wǎng)址，需要的朋友可以參考下
    2015-08-08

最新評論