uniapp列表多選
選中並獲取值,實現的程式碼如下:
<template>
<view class="index">
<view class="new_box" style="margin-top: 20upx;">
<view class="bbox">
<view class="list-box" v-for="(item,index) in list" :key="index">
<view class="list-ed">
<image class="list-img" src="../../static/logo.png" mode="aspectFill"></image>
<view class="list-right">
<view class="list-head" @click="choice(index)">
<view :class="[item.selected?'selde':'noselde']">{{item.selected?"已選擇":"選擇"}}<text :class="[item.selected?'selde-q':'noselde-q']"></text></view>
</view>
<view class="list-name">{{item.title}}</view>
<view class="list-da">
<view>課程:<text>{{item.course}}</text></view>
<view>時長:<text>{{item.duration}}</text>分</view>
</view>
</view>
</view>
</view>
<view class="sure" @click="sure">確認</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
list: [{
course_id: "001",
title: "一個很長很長很長的標題一個很長很長很長的標題一個很長很長很長的標題一個很長很長很",
course: "體育課",
duration: "0",
selected: false
},
{
course_id: "002",
title: "一個標題",
course: "音樂課",
duration: "120",
selected: false
},
{
course_id: "003",
title: "好好學習天天向上",
course: "資訊科",
duration: "80",
selected: false
},
],
selectId:[],
};
},
methods: {
//選擇課程
choice(index){
if(this.list[index].selected == true){
this.list[index].selected = false;
//取消選中時刪除陣列中的值
for(var i = 0; i < this.selectId.length; i++){
if(this.selectId[i] === this.list[index].course_id){
this.selectId.splice(i,1);
}
}
console.log("選中的值",this.selectId)
}else{
this.list[index].selected = true;
this.selectId.push(this.list[index].course_id)
console.log("選中的值",this.selectId)
}
},
//提交
sure(){
//提交選中的值
if(this.selectId.length==0){
alert("請選擇學科");
return false;
}
var listIds = this.selectId.join(",")
console.log("提交的資料",listIds)
}
}
};
</script>
<style>
page{
background-color: #eee;
}
/* 已選擇 */
.selde {
border: 1px solid red;
background: red;
color: #FFFFFF;
border-radius: 20upx;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
font-size: 20upx;
padding: 0 10upx;
}
.selde-q {
width: 18upx;
height: 18upx;
border-radius: 50%;
background: #FFFFFF;
margin-left: 6upx;
}
/* 未選擇 */
.noselde {
border: 1px solid #959595;
background: #FFFFFF;
color: #959595;
border-radius: 20upx;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
font-size: 20upx;
padding: 0 10upx;
}
.noselde-q {
border: 1px solid #959595;
width: 16upx;
height: 16upx;
border-radius: 50%;
background: #FFFFFF;
margin-left: 6upx;
}
.list-box {
display: flex;
flex-direction: column;
background-color: #fff;
margin: 0upx 16upx 16upx 16upx;
padding: 16upx;
border-radius: 10upx;
}
.list-ed {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.list-left {
margin-right: 16upx;
}
.list-img {
width: 160upx;
height: 160upx;
margin: 0upx 16upx 0upx 0upx;
}
.list-right {
display: flex;
flex-direction: column;
width: 510upx;
height: 180upx;
}
.list-right-img {
width: 140upx;
height: 38upx;
}
.noadsop {
width: 120upx;
height: 32upx;
}
.list-head {
display: flex;
justify-content: flex-end;
margin-bottom: 10upx;
}
.list-name {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
margin-bottom: 10upx;
}
.list-da {
display: flex;
flex-direction: row;
font-size: 26upx;
}
.list-da view {
width: 50%;
}
.list-da view text {
color: red;
}
.sure {
background: #FF6000;
color: #FFFFFF;
width: 600upx;
height: 70upx;
display: flex;
justify-content: center;
align-items: center;
border-radius: 40upx;
margin: 60upx auto;
}
</style>
記錄此時此刻
相關文章
- 常用的php列表多條件篩選功能PHP
- Vue.js 多選列表(Multi-Select)元件Vue.js元件
- uniapp 檔案選擇APP
- uniapp實戰——封裝商品列表元件並使用APP封裝元件
- uniapp雲函式教程② :商品列表增刪改查APP函式
- 自動化索引列表,uniapp外掛 nickro-sortPickerList索引APP
- Uniapp 城市選擇JSON資料APPJSON
- uniapp 實現複選下拉框APP
- uniapp 周選擇範圍時間APP
- HTML <datalist> 選項列表HTML
- HTML datalist 選項列表HTML
- 5.4.3 使用多個列表
- uniapp商城前端原始碼下載/uniapp多店鋪PHP商城原始碼下載APP前端原始碼PHP
- jq 單選多選 && 多選限制
- uniapp點選按鈕提交textarea值為undifineAPP
- word多級列表如何自動設定 word多級列表設定的步驟
- 微信小程式-uniapp-切換tab時資料列表如何切換?微信小程式APP
- vue實現城市列表選擇Vue
- Laravel-admin 資源精選列表Laravel
- vxe-table 多選、使用表格多選資料、核取方塊多選
- 使用 Python 迴圈建立多個列表Python
- 單選多選按鈕
- TreeSelect 篩選後的全選是否支援僅全選篩選出來的列表
- 直播軟體原始碼,利用uniapp checkbox判斷是否選中原始碼APP
- 影片直播原始碼,uniapp checkbox 怎麼判斷是否選中原始碼APP
- TOP 100 大前端超棒精選列表前端
- PbootCMS對內容列表進行篩選boot
- easyExcel匯出多個list列表的excelExcel
- start uniappAPP
- uniapp公告APP
- uniapp 返回APP
- uniapp BusAPP
- kendoUI 多選下拉選單 kendoMultiSelectUI
- uniapp,小程式防止二次點選問題,解決方案APP
- 短視訊原始碼,uniapp中單選框radio的實現原始碼APP
- uniapp實戰——實現左側資料渲染和點選高亮APP
- python 將一個列表切割成隨機指定長度的多個列表Python隨機
- [開發教程]第19講:Bootstrap選擇列表boot