小程序置顶、自定义删除提示、联级默认选项
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!-- 顶部筛选 --> <view class="fixHead"> <view class="selectFactory" bindtap="openFactoryMask">厂别<text class="factoryName">{{factoryObj.defaultFactory}}</text></view> <view class="selectStorage" bindtap="openFactoryMask">仓库<text class="storageName">{{factoryObj.defaultStorage}}</text></view> <view class="selectDate">时间<picker class="dateTxt" mode="date" bindchange="selectDate">{{date}}</picker></view> <view wx:if="{{isShowEmptyMask}}" class="selectAllBtn">全选<checkbox class="checkbox" checked></checkbox></view> <view class="scannedNum">已扫总数:{{dataLst.length > 0 ? dataLst.length : '--'}}</view> <label bindtap="cancelScan" class="cancelScan {{isCancelScan ? 'doCancelScan' : 'nothing'}}">撤销扫描<checkbox class="checkbox"></checkbox></label> </view> <!-- 数据项 --> <view wx:if="{{dataLst.length > 0 && !isShowStorage}}" class="dataWrapper {{isShowEmptyMask ? 'dataEmpty' : 'nothing'}}"> <block wx:for="{{dataLst}}" wx:key="id"> <view class="dataItem"> <text class="dataNo">制令\采购单号:{{item.dataNo}}</text> <view class="customerName">客户简称:{{item.customerName}}</view> <view class="dataRow"> <text class="batchNo itemTxt">生产批号:{{item.batchNo}}</text> <text class="dataNum itemTxt">数量:{{item.dataNum}}</text> </view> <view class="specification">品名规格:{{item.specification}}</view> <checkbox wx:if="{{isShowEmptyMask}}" class="checkDelete checkbox" checked></checkbox> <button class="deleteBtn" data-index="{{index}}" bindtap="deleteData"><image class="iconDelete" src="QHImage/iconDelete.png" mode="widthFix"></image></button> </view> </block> <view class="endTip">到底了</view> </view> <!-- 为空提示 --> <view class="nothingBox" wx:if="{{dataLst.length == 0}}"> <image class="nothingPic" src="QHImage/nothingPic.png" mode="widthFix"></image> <text class="nothingTip">请扫码进行成品入库作业</text> </view> <!-- 厂别仓库选择 --> <view class="storageWrapper {{isShowStorage ? 'showStorageMask' : 'nothing'}}"> <view class="factoryContain"> <block wx:for="{{factoryObj.factoryLst}}" wx:key="id"> <text class="factoryOption {{factoryObj.factoryIndex == index ? 'defaultFactory' : 'nothing'}}" data-name="{{item.factoryName}}" data-index="{{index}}" bindtap="selectFactory">{{item.factoryName}}</text> </block> </view> <view class="storageContain"> <block wx:for="{{factoryObj.factoryLst[factoryObj.factoryIndex].storageLst}}" wx:key="id"> <text class="storageOption {{factoryObj.storageIndex == index ? 'defaultStorage' : 'nothing'}}" data-name="{{item.storageName}}" data-index="{{index}}" bindtap="selectStorage">{{item.storageName}}</text> </block> </view> <view class="footBtn"><button bindtap="closeFactoryMask" size="default" class="okBtn btnActive">确定</button></view> </view> <!-- 底部按钮 --> <view class="fixFoot"> <button bindtap="showEmptyBox" class="emptyBtn btnActive {{!!dataLst.length ? 'doEmpty' : 'nothing'}}">清空</button> <button bindtap="submitData" class="submitBtn btnActive {{!!dataLst.length ? 'doSubmit' : 'nothing'}}">提交</button> <button bindtap="scanCode" class="scanBtn btnActive"><image class="iconScan" src="QHImage/iconScan.png" mode="widthFit"></image>扫码</button> </view> <!-- 操作提示 --> <view class="operateTip {{operateTip.isShowTip ? 'showOperateTip' : 'nothing'}}">{{operateTip.tipTxt}}</view> <!-- 删除提示 --> <view class="mask {{isShowEmptyMask ? 'showMask' : 'nothing'}}"></view> <view class="confirmBox {{isShowEmptyMask ? 'showConfirmBox' : 'nothing'}}"> <text class="confirmTip">提示</text> <view class="confirmTxt">是否清空界面所有数据?</view> <button bindtap="cancelEmpty" class="cancelBtn btnActive" size="mini">取消</button> <button bindtap="emptyData" class="confirmBtn" size="mini">确定</button> </view> <!-- 置顶 --> <view class="goTopBtn {{isScroll ? 'showGoTop' : 'hideGoTop' }}" bindtap="goTop">顶部</view>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
Page({ /** * 页面的初始数据 */ data: { isShowEmptyMask: false, isCancelScan: false, isShowStorage: false, operateTip: { isShowTip: false, tipTxt: "" }, factoryObj: { // 工厂仓库 defaultFactory: "第二工厂", defaultStorage: "成品仓库2-2", factoryLst: [] }, date: "", // 日期 dataLst: [] // 扫码数据 }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var that = this; that.loadFactory(); that.getNowDate(); var dataInfo = [ { "id": 1,"dataNo": "YTXCX20211123906","customerName": "晨希纳","batchNo": "20211123A01","dataNum": "36900","specification": "SA21001" }, { "id": 2,"dataNo": "YTXCX20211123906","customerName": "晨希纳","batchNo": "20211123A01","dataNum": "36900","specification": "SA21001" }, { "id": 3,"dataNo": "YTXCX20211123906","customerName": "晨希纳","batchNo": "20211123A01","dataNum": "36900","specification": "SA21001" }, { "id": 4,"dataNo": "YTXCX20211123906","customerName": "晨希纳","batchNo": "20211123A01","dataNum": "36900","specification": "SA21001" }, { "id": 5,"dataNo": "YTXCX20211123906","customerName": "晨希纳","batchNo": "20211123A01","dataNum": "36900","specification": "SA21001" } ]; that.setData({ dataLst: dataInfo }); }, // 获取工厂 loadFactory: function() { var that = this; var factoryIndex = 0; // 根据工厂显示对应仓库 var storageIndex = 0; var factoryInfo = [ { "id": 1, "factoryName": "第一工厂", "storageLst": [ {"storageName": "成品仓库A"}, {"storageName": "成品仓库A"}, {"storageName": "成品仓库A"}, {"storageName": "成品仓库A"}, {"storageName": "成品仓库B"}, {"storageName": "成品仓库C"}, {"storageName": "成品仓库D"}, {"storageName": "成品仓库E"}, {"storageName": "成品仓库G"}, {"storageName": "成品仓库H"}, {"storageName": "成品仓库I"}, {"storageName": "成品仓库J"}, {"storageName": "成品仓库K"}, {"storageName": "成品仓库L"}, {"storageName": "成品仓库M"}, {"storageName": "成品仓库N"}, {"storageName": "成品仓库END"} ] }, { "id": 2, "factoryName": "第二工厂", "storageLst": [ {"storageName": "成品仓库2-1"}, {"storageName": "成品仓库2-2"}, {"storageName": "成品仓库2-3"}, {"storageName": "成品仓库2-4"}, {"storageName": "成品仓库2-5"}, {"storageName": "成品仓库2-6"}, {"storageName": "成品仓库2-7"}, {"storageName": "成品仓库2-8"} ] }, { "id": 3, "factoryName": "第三工厂", "storageLst": [ {"storageName": "成品仓库3-1"}, {"storageName": "成品仓库3-2"}, {"storageName": "成品仓库3-3"}, {"storageName": "成品仓库3-4"}, {"storageName": "成品仓库3-5"}, {"storageName": "成品仓库3-6"} ] } ]; factoryInfo.forEach((item, index) => { if(item.factoryName == that.data.factoryObj.defaultFactory) { factoryIndex = index; item.storageLst.forEach((item2, index2) => { if(item2.storageName == that.data.factoryObj.defaultStorage) { storageIndex = index2; } }); } }); that.setData({ "factoryObj.factoryLst": factoryInfo, "factoryObj.factoryIndex": factoryIndex, "factoryObj.storageIndex": storageIndex }); }, // 打开工厂弹框 openFactoryMask: function() { this.setData({ isShowStorage: true }); wx.setNavigationBarTitle({ title: '厂别仓库选择' }); }, // 选择工厂 ———— 选择工厂的同时也要选择仓库(如果工厂一开始不是默认的,则仓库默认选中第一个) selectFactory: function(e) { var that = this; var factoryName = e.currentTarget.dataset.name; var factoryIndex = e.currentTarget.dataset.index; var factoryObj = that.data.factoryObj; var storageName = factoryObj.defaultStorage; var storageIndex = factoryObj.storageIndex; if(factoryIndex != factoryObj.factoryIndex) { storageIndex = 0; storageName = factoryObj.factoryLst[factoryIndex].storageLst[storageIndex].storageName; } that.setData({ "factoryObj.defaultFactory": factoryName, "factoryObj.factoryIndex": factoryIndex, "factoryObj.defaultStorage": storageName, "factoryObj.storageIndex": storageIndex }); }, // 选择仓库 selectStorage: function(e) { var storageName = e.currentTarget.dataset.name; var storageIndex = e.currentTarget.dataset.index; this.setData({ "factoryObj.defaultStorage": storageName, "factoryObj.storageIndex": storageIndex }); }, // 关闭工厂弹框 closeFactoryMask: function() { this.setData({ isShowStorage: false }); wx.setNavigationBarTitle({ title: '产品入库作业', }); }, // 默认当天 getNowDate: function() { var nowDate = new Date(); var year = nowDate.getFullYear(); var month = nowDate.getMonth() + 1; var day = nowDate.getDate(); month = month < 10 ? "0" + month : month; day = day < 10 ? "0" + day : day; var date = year + "-" + month + "-" + day; this.setData({ date: date }); }, // 选择日期 selectDate: function(e) { this.setData({ date: e.detail.value }); }, // 扫描 scanCode: function(e) { var that = this; var dataInfo = [ { "id": 1,"dataNo": "YTXCX20211123906","customerName": "晨希纳","batchNo": "20211123A01","dataNum": "36900","specification": "SA21001" }, { "id": 2,"dataNo": "YTXCX20211123906","customerName": "晨希纳","batchNo": "20211123A01","dataNum": "36900","specification": "SA21001" }, { "id": 2,"dataNo": "YTXCX20211123906","customerName": "晨希纳","batchNo": "20211123A01","dataNum": "36900","specification": "SA21001" }, { "id": 2,"dataNo": "YTXCX20211123906","customerName": "晨希纳","batchNo": "20211123A01","dataNum": "36900","specification": "SA21001" }, { "id": 3,"dataNo": "YTXCX20211123906","customerName": "晨希纳","batchNo": "20211123A01","dataNum": "36900","specification": "SA21001" } ]; wx.scanCode({ success(res) { wx.showToast({ title: "加载中……", icon: "loading", duration: 400 }) dataInfo = that.data.dataLst.concat(dataInfo); console.log(dataInfo.length); that.setData({ dataLst: dataInfo }); }, fail(res) { wx.showToast({ title: "扫码失败", icon: "none", duration: 1000 }) } }) }, // 清空 showEmptyBox: function() { this.setData({ isShowEmptyMask: true }); }, // 取消清空 cancelEmpty: function() { this.setData({ isShowEmptyMask: false }) }, // 确认清空 emptyData: function() { var that = this; that.setData({ dataLst: [], "operateTip.isShowTip": true, "operateTip.tipTxt": "清空完成", isShowEmptyMask: false }); that.hideOperateTip(); }, // 提交 submitData: function() { var that = this; that.setData({ dataLst: [], "operateTip.isShowTip": true, "operateTip.tipTxt": "已提交保存", }); that.hideOperateTip(); }, // 撤销扫描 // 使用场景————对已经通过扫码进来的数据重新扫描后会根据单号删除列表对应数据,例如要取消 G 项数据,但列表内容太多、难找时,可应用撤销扫描。 cancelScan: function(e) { var that = this; that.setData({ isCancelScan: !that.data.isCancelScan }); }, // 删除数据 deleteData: function(e) { var that = this; var index = e.currentTarget.dataset.index; that.data.dataLst.splice(index, 1); that.setData({ dataLst: that.data.dataLst, "operateTip.isShowTip": true, "operateTip.tipTxt": "删除成功" }); that.hideOperateTip(); }, // 关闭操作提示 ———— 关闭时间同 wxss 动画设置时间一致 hideOperateTip: function() { var that = this; setTimeout(function() { that.setData({ "operateTip.isShowTip": false, "operateTip.tipTxt": "", }); }, 1000) }, // 页面滚动 onPageScroll: function(e) { var that = this; if(e.scrollTop >= 200) { that.setData({ isScroll: true }); } else { that.setData({ isScroll: false }); } }, // 置顶 goTop: function() { if(wx.pageScrollTo) { wx.pageScrollTo({ scrollTop: 0, duration: 300 }); } }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
view,scroll-view,swiper,swiper-item,movable-area,movable-view,cover-view,cover-image,icon,text,rich-text,progress,button,checkbox-group,checkbox,form,input,label,picker,picker-view,radio-group,radio,slider,switch,textarea,navigator,functional-page-navigator,image,video,camera,live-player,live-pusher,map,canvas,open-data,web-view,ad {box-sizing:border-box;padding:0;margin:0;-webkit-tap-highlight-color:rgba(0,0,0,0);line-height: 1;} page { position: relative; background-color: #f5f5f5; } .btnActive:active { filter: opacity(.85);} /* 顶部 */ .fixHead { position: fixed; display: grid; top: 0; left: 0; z-index: 2; width: 100%; grid-template-columns: 60.5% 39.5%; justify-content: space-between; align-items: center; grid-row-gap: 20rpx; padding: 30rpx 30rpx 20rpx; font-size: 26rpx; color: #333; background-color: #fff; } .selectFactory { grid-column-start: span 2;} .factoryName, .storageName, .dateTxt { display: inline-block; position: relative; height: 70rpx; padding: 0 20rpx; margin-left: 10rpx; line-height: 70rpx; font-weight: 700; border-radius: 10rpx; background-color: #f5f5f5; } .factoryName {width: 628rpx;} .storageName {width: 336rpx;} .dateTxt {width: 210rpx;} .factoryName::after, .storageName::after, .dateTxt::after { position: absolute; top: 42%; right: 20rpx; content: ""; width: 10rpx; height: 10rpx; color: #399EFF; border-top: 1px solid; border-right: 1px solid; transform: rotate(45deg); } .selectAllBtn { grid-column-start: span 2; text-align: right; color: #a3a3a3; } .selectAllBtn ~ .scannedNum, .selectAllBtn ~ .cancelScan { display: none; } .scannedNum {font-weight: 800;} .cancelScan { width: 203rpx; height: 50rpx; margin-left: auto; line-height: 50rpx; text-align: center; font-weight: 700; color: #7f7f7f; background-color: #f5f5f5; border-radius: 6rpx; transition: all .2s; } .doCancelScan { color: #399EFF; background-color: #ECF6FF; } .checkbox { width: 28rpx; height: 28rpx; margin-left: 28rpx; vertical-align: 4rpx; } .checkbox .wx-checkbox-input { width: 28rpx; height: 28rpx; border-radius: 50%; } .checkbox .wx-checkbox-input.wx-checkbox-input-checked { background-color: #399EFF; border-color: #399EFF; transition: all .3s; } .checkbox .wx-checkbox-input.wx-checkbox-input-checked::before { width: 28rpx; height: 28rpx; line-height: 30rpx; font-size: 30rpx; color: #fff; } /* 成品项 */ .dataWrapper { position: relative; height: 100%; padding: 310rpx 0 130rpx; } .dataEmpty {padding-top: 290rpx;} .endTip::before, .endTip::after { position: absolute; top: 50%; content: ""; width: 34%; border-bottom: 2rpx solid #EBEBEB; transform: scaleY(.5) translateY(-50%); } .endTip::before {left: 0;} .endTip::after {right: 0;} .dataItem { position: relative; width: 92%; padding: 26rpx 20rpx 10rpx 30rpx; margin: 0 auto 30rpx; background-color: #fff; border-radius: 10rpx; } .dataNo { display: block; padding-bottom: 26rpx; line-height: inherit; font-size: 30rpx; font-weight: 700; line-height: 1.3; word-break: break-all; word-wrap: break-word; color: #333; } .dataRow { display: flex; margin-bottom: 14rpx;} .customerName, .specification { padding-bottom: 14rpx;} .customerName, .itemTxt, .specification{ display: block; flex-shrink: 0; line-height: 1.3; word-break: break-all; word-wrap: break-word; font-size: 26rpx; color: #7F7F7F; } .batchNo { min-width: 370rpx; max-width: 450rpx; padding-right: 20rpx; } .dataNum { flex: 1 0 0; } .checkDelete { position: absolute; top: 24rpx; right: 30rpx; } .deleteBtn:not([size=mini]) { position: absolute; right: 20rpx; bottom: 30rpx; width: 50rpx; height: 50rpx; padding: 0; margin: 0; line-height: 47rpx; background-color: #EBEBEB; } .deleteBtn:active {background-color: #d6d4d4;} .iconDelete {width: 23rpx; height: 23rpx;} .endTip { position: relative; width: 92%; margin: 0 auto; font-size: 26rpx; text-align: center; color: #7F7F7F; } /* 厂别、仓库选择 */ .storageWrapper { position: fixed; display: flex; top: 0; left: 100%; z-index: 10; width: 100%; height: 100%; padding-bottom: 96rpx; visibility: hidden; opacity: 1; background-color: #f5f5f5; } .showStorageMask { left: 0; visibility: visible; opacity: 1; transition: left .3s; } .factoryContain { overflow: auto; width: 43.2%; height: 100%; background-color: #fff; -webkit-overflow-scrolling: touch; } .factoryContain::-webkit-scrollbar { width: 0; height: 0; color: transparent; } .storageContain { overflow: auto; width: 56.8%; height: 100%; padding: 20rpx 20rpx 0; -webkit-overflow-scrolling: touch; } .factoryOption { display: block; width: 100%; padding: 24rpx 32rpx 24rpx; line-height: 1.5; font-size: 26rpx; text-align: center; color: #333; transition: all .35s, background-color .55s; } .defaultFactory { font-weight: 800; color: #399EFF; background-color: #f5f5f5; } .storageOption { display: block; padding: 23rpx 20rpx; margin-bottom: 30rpx; line-height: 1.5; font-size: 28rpx; border-radius: 10rpx; background-color: #fff; transition: all .2s, background-color .35s; } .defaultStorage { color: #fff; background-color: #399EFF; } .footBtn { position: fixed; left: 0; bottom: 0; width: 100%; height: 98rpx; padding: 10rpx 30rpx; background-color: #fff; } .okBtn[size=default] { width: 100%; height: 78rpx; padding: 0; line-height: 78rpx; font-size: 30rpx; font-weight: 400; color: #fff; background-color: #3FB2FF; border-radius: 39rpx; } /* 底部 */ .fixFoot { position: fixed; display: flex; justify-content: space-between; align-items: center; left: 0; bottom: 0; z-index: 2; width: 100%; height: 98rpx; padding: 0 30rpx; background-color: #fff; } .emptyBtn:not([size=mini]), .submitBtn:not([size=mini]), .scanBtn:not([size=mini]) { width: 222rpx; height: 78rpx; padding: 0; margin: 0; line-height: 78rpx; font-size: 30rpx; font-weight: 400; border-radius: 39rpx; } .emptyBtn, .submitBtn { pointer-events: none; color: #7F7F7F; background-color: #f5f5f5; transition: all .3s; } .doEmpty { pointer-events: initial; color: #fff; background-color: #576B95; } .doSubmit { pointer-events: initial; color: #fff; background-color: #399EFF; } .scanBtn { color: #fff; background-color: #399EFF; } .iconScan { width: 30rpx; height: 30rpx; margin-right: 10rpx; vertical-align: -5rpx; } /* 操作提示 */ .operateTip { position: fixed; left: 50%; bottom: 128rpx; min-width: 192rpx; height: 57rpx; padding: 0 20rpx; line-height: 57rpx; font-size: 30rpx; text-align: center; color: #fff; visibility: hidden; opacity: 0; background-color: rgba(51,51,51,.7); border-radius: 10rpx; transform: translateX(-50%); } .showOperateTip {animation: showTip 1s;} @keyframes showTip { 0% { visibility: hidden;opacity: 0; } 100% { visibility: visible;opacity: 1; } } /* 删除提示 */ .mask { position: fixed; top: 0; left: 0; z-index: 6; width: 100%; height: 100%; opacity: 0; visibility: hidden; background-color: rgba(0,0,0,.2); } .confirmBox { position: fixed; top: 50%; left: 50%; z-index: 9; width: 640rpx; height: 274rpx; padding: 30rpx; opacity: 0; visibility: hidden; text-align: center; background-color: #fff; border-radius: 24rpx; transform: translate(-50%, -50%); } .showMask { visibility: visible; opacity: 1; transition: all .15s; } .showConfirmBox { visibility: visible; opacity: 1; transition: all .4s; } .confirmTip { font-size: 30rpx; font-weight: 700; color: #333; } .confirmTxt { padding: 50rpx 0 50rpx; font-size: 26rpx; } .cancelBtn[size=mini], .confirmBtn[size=mini] { width: 50%; font-size: 30rpx; background-color: #fff; } .confirmBtn {color: #399EFF;} .cancelBtn:active, .confirmBtn:active { background-color: #f5f5f5; } /* 为空提示 */ .nothingBox { width: 400rpx; padding-top: 60%; margin: 0 auto; text-align: center; } .nothingPic { width: 400rpx; height: 400rpx; } .nothingTip { font-size: 26rpx; color: #7f7f7f; } /* 置顶 */ .goTopBtn { position: fixed; bottom: 190rpx; width: 74rpx; height: 74rpx; line-height: 5; font-size: 20rpx; text-align: center; color: #fff; background-color: #2C8CFD; border-radius: 10rpx 0 0 10rpx; transition: all .3s; } .hideGoTop { right: -74rpx; opacity: 0;} .showGoTop { right: 0; opacity: .85;} .goTopBtn::before { position: absolute; top: 20rpx; left: 50%; z-index: 6; content: ''; width: 20rpx; height: 20rpx; color: #fff; border-top: 1px solid; border-right: 1px solid; transform: translateX(-50%) rotate(-45deg); } .goTopBtn:active { opacity: .7; transition: all .2s; }
示例: