h5商城网站 源代码,网络营销策划案框架,常州网站建站公司,河南网站优化排名解决问题#xff1a;
1.选中文案样式#xff0c;比如字体颜色
2.修改分割线颜色
3.多列时#xff0c;修改两边间距让其平分
展示效果#xff1a; 代码如下
templateu-popup :showshowPicker :safeAreaInsetBottomfalse close
1.选中文案样式比如字体颜色
2.修改分割线颜色
3.多列时修改两边间距让其平分
展示效果 代码如下
templateu-popup :showshowPicker :safeAreaInsetBottomfalse closecloseview classtitle-boxview classtitle{{title}}/viewtext classiconfont icon-guanbidankuang clickclose/text/viewpicker-view classpicker-view indicator-classpicker-selected immediate-change :valueinnerIndexchangechangeHandlerpicker-view-columnview classitem :classcolumns2.length0||columns3.length0?first-item:col1v-for(item, index) in columns :keyindex!-- 设置选中文字样式class --view :classcolumns[innerIndex[0]].textitem.text?selected-text:{{item.text}}/view/view/picker-view-columnpicker-view-column v-ifcolumns2columns2.length0view classitem v-for(item, index) in columns2 :keyindexview :classcolumns2[innerIndex[1]].textitem.text?selected-text:{{item.text}}/view/view/picker-view-columnpicker-view-column v-ifcolumns3columns3.length0view classitem v-for(item, index) in columns3 :keyindexview :classcolumns3[innerIndex[2]].textitem.text?selected-text:{{item.text}}/view/view/picker-view-column/picker-viewview classbtn-boxview classbtn clickclose(submit)确定/view/view/u-popup
/templatescriptexport default {data() {return {innerIndex: [0, 0, 0],showPicker: false,currentData: [],previousValue: [0, 0, 0] // 用于保存之前的选中值}},props: {columns: {type: Array,default: []},columns2: {type: Array,default: []},columns3: {type: Array,default: []},show: {type: Boolean,default: false},title: {type: String,default: 请选择},selectIndex: {type: Array,default: []}},watch: {show: function() {this.showPicker this.show},selectIndex() {this.innerIndex this.selectIndex}},mounted() {if (this.selectIndex this.selectIndex.length 0) {this.innerIndex this.selectIndex}this.currentData [this.columns[this.innerIndex[0]], this.columns2.length 0 ? this.columns2[this.innerIndex[1]] : {}, this.columns3.length 0 ? this.columns3[this.innerIndex[2]] : {}]// console.log(this.currentData);},methods: {changeHandler(e) {const that thisuni.vibrateShort({complete() {console.log(e);that.innerIndex e.detail.valueconst previousValue that.previousValue;// 判断哪一列发生了变化for (let i 0; i that.innerIndex.length; i) {if (that.innerIndex[i] ! previousValue[i]) {// console.log(第 ${i 1} 列发生了变化);that.$emit(changeIndex, i 1)break;}}that.previousValue that.innerIndexthat.currentData [that.columns[e.detail.value[0]], that.columns2.length 0 ? that.columns2[e.detail.value[1]] : {},that.columns3.length 0 ? that.columns3[e.detail.value[2]] : {}]// that.currentData that.columns[e.detail.value[0]]}})},close(type) {// this.showPicker falseif (type submit) {console.log(this.currentData);this.$emit(submit, this.currentData)} else {this.$emit(close, true)}}}}
/scriptstyle langscss scoped.title-box {padding: 28rpx 0;display: flex;justify-content: center;align-items: center;.title {font-weight: 500;font-size: 32rpx;}.icon-guanbidankuang {font-size: 60rpx;position: absolute;right: 40rpx;}}.picker-view {height: 480rpx;margin-bottom: 34rpx;margin-top: 48rpx;padding: 0 60rpx;.item {// line-height: 96rpx;// text-align: center;font-size: 28rpx;display: flex;align-items: center;justify-content: flex-end;}.first-item {justify-content: center;}.col1 {justify-content: flex-start;}}.btn-box {padding: 12rpx 24rpx;z-index: 9;box-shadow: 0px 4rpx 16rpx 0px rgba(0, 0, 0, 0.1);padding-bottom: calc(env(safe-area-inset-bottom) 12rpx);.btn {border-radius: 20rpx;background: $primary-color;height: 74rpx;display: flex;align-items: center;justify-content: center;color: #fff;font-size: 28rpx;letter-spacing: 0.84rpx;font-weight: 600;}}
/style
style.picker-selected {height: 96rpx;}.picker-selected::before {content: ;position: absolute;top: 0;border: 2rpx solid #FAFAFA;}.selected-text {font-weight: 500;}.picker-selected::after {content: ;position: absolute;bottom: 0;border: 2rpx solid #FAFAFA;}
/style
引用省略数据填充
templateselection-picker v-ifcolumnsTime.length0 :showshowTime :columnscolumnsTime :selectIndexselectIndex :columns2columnsTime2 :columns3columnsTime3 title请选择出发时间 closeshowTimefalse submitgetTime/selection-picker
/templatebutton clickshowTimetrue打开/buttonscriptexport default {data() {return {showTime: false}}}
/script
