微信小程序WeUI中half-screen-dialog底部弹窗相关问题

2024-01-18 14:40

本文主要是介绍微信小程序WeUI中half-screen-dialog底部弹窗相关问题,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

需求:
如图需要从页面底部弹出一个弹框,弹框里的内容超出最大高度时,可以滚动。
在这里插入图片描述

问题:

  1. 原生的组件关闭图标在左侧,需要通过样式改到右侧
  2. 原生的组件底部有footer按钮区域,需要通过样式隐藏掉
  3. 在弹框里使用区域滚动通过scroll-view 设置纵向滚动并给最大高度
  4. 设置title
  5. half-screen-dialog如果在子组件中引入,需要在pages父组件中的css文件里修改样式。在子组件中修改不生效

代码:

index.json

{"component": true,"usingComponents": {"compute-cart": "/components/computeCart","mp-half-screen-dialog": "weui-miniprogram/half-screen-dialog/half-screen-dialog"}
}

index.wxml

<mp-half-screen-dialog extClass='type-dialog' show="{{typeDialog}}" bindclose='toggleDialog'><view slot="title" style="text-align: left;"><text>{{curGoodsSpec.goodsName}} {{curGoodsSpec.spec}}</text></view><view class="model" slot="desc"><scroll-view class="scrollBox" scroll-y="true"><view class="" wx:for="{{curGoodsSpec.detailVos}}" wx:key="index"><view class="title">{{item.goodsSpec}}<view class="bestOffer" wx:if="{{item.bestOfferLabel}}"><image src="https://retail.benlai.com/fortune/images/bazaar/cheapestSingle.png" mode="widthFix" class="cheapestSingle"></image>单价最便宜</view></view><view class="goods-weight"><view class="goods-netWeight " style="margin-right: 24rpx;"><view class="weight-name {{item.isSelected ? 'goods-name-active' : ''}} {{curGoodsSpec.settlementType == 1 ? 'bordeRi' : ''}}">¥{{item.disSalePrice}}/件</view><view class="weight-num {{item.isSelected ? 'goods-num-active' : ''}}" wx:if="{{curGoodsSpec.settlementType !== 1}}">约¥{{item.netUnitPrice}}/斤</view></view></view></view></scroll-view><!-- 合计 --><view class="footer"><view class="footer-all">共计:<text class="totalIcon">¥</text><text class="totalMoney"> {{curGoodsSpec.totalSpecAmount}}</text></view><view class=""><!-- 不在售卖时间显示加减数量 --><view class="{{curGoodsSpec.goodsStatus == 1 ? 'priceinfo' : ''}} {{curGoodsSpec.goodsStatus == 5 ? 'out-sale-cart-btn' : ''}}"><compute-cartquantity="{{curGoodsSpec.cartQty}}"cur-stock="{{curGoodsSpec.curStock}}"from="cartpageSpec"goods-key="{{curGoodsSpec.goodsKey}}"goods-status="{{curGoodsSpec.goodsStatus}}"multiple="{{curGoodsSpec.multiple}}"bind:cb="bindCartItemChange"></compute-cart></view></view></view></view>
</mp-half-screen-dialog>

index.js

methods: {bindCartItemChange(e) {this.setData({curGoodsKey: e.detail.goodsKey})this.getGoodsSpecShow()},// 优惠加购toggleDialog(e) {this.setData({typeDialog: !this.data.typeDialog,curGoodsKey: e.detail})if (this.data.typeDialog) {this.getGoodsSpecShow()}},getGoodsSpecShow() {let params_ = {goodsKey: this.data.curGoodsKey,merchantNo: wx.getStorageSync("merchantNo")}goodsSpecShow(params_).then(data => {if (data) {this.setData({curGoodsSpec: data})}})},}

index.wxss

.goods-weight .weight-num {color: #666;background: #fff;border-radius: 0rpx 4rpx 4rpx 0rpx;border: 1rpx solid #CFCFCF;padding: 9rpx 12rpx;
}
.scrollBox {max-height: 580rpx;
}
.scrollBox .title {font-size: 28rpx;font-weight: 400;color: #999999;margin-bottom: 16rpx;display: flex;
}
.model {border-top: 2rpx solid #EEEEEE;padding-top: 32rpx;
}
.footer {padding: 24rpx 32rpx 0 32rpx;border-top: 2rpx solid #EEEEEE;display: flex;justify-content: space-between;
}
.footer .footer-all {font-size: 24rpx;font-weight: 400;color: #666666;line-height: 34rpx;
}
.footer .totalIcon {font-size: 24rpx;font-weight: 400;color: #FF0B0B;line-height: 34rpx;
}
.footer .totalMoney {font-size: 40rpx;font-weight: 600;color: #FF0B0B;line-height: 56rpx;
}
.scrollBox {padding: 0 32rpx;
}.priceinfo {text-align: right;
}
.out-sale-cart-btn {position: relative;z-index: 20;
}
.bestOffer {font-size: 24rpx;font-weight: 400;color: #FF0B0B;line-height: 34rpx;display: flex;margin-left: 8rpx;
}
.goods-weight .goods-name-active {color: #FA4F13;border: 1rpx solid #E66F22;background: #fdd8cf;
}
.goods-weight .goods-num-active {color: #FA4F13;border: 1rpx solid #E66F22;border-left: 0;
}

弹窗样式只能写在pages父组件中

/* half-screen-dialog ui组件样式只能写在pages里 */.type-dialog .weui-half-screen-dialog__ft {display: none !important;
}
.type-dialog .weui-half-screen-dialog__bd {padding-bottom: 20px;
}
.type-dialog {padding: 0;
}
.weui-half-screen-dialog__hd {padding: 0 32rpx;
}
/* 隐藏更多按钮避免关闭点击偶尔失效 */
.weui-half-screen-dialog .weui-icon-btn_more{display: none !important;
}
.weui-icon-btn_close {position: absolute;right: -680rpx;
}
.weui-half-screen-dialog__hd__main {padding-left: 0 !important;
}

参考文章:
微信小程序WeUI中half-screen-dialog的小问题
WeUI官方组件库:助力小程序高效设计与开发官方

这篇关于微信小程序WeUI中half-screen-dialog底部弹窗相关问题的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/619330

相关文章

如何用java对接微信小程序下单后的发货接口

《如何用java对接微信小程序下单后的发货接口》:本文主要介绍在微信小程序后台实现发货通知的步骤,包括获取Access_token、使用RestTemplate调用发货接口、处理AccessTok... 目录配置参数 调用代码获取Access_token调用发货的接口类注意点总结配置参数 首先需要获取Ac

Flask解决指定端口无法生效问题

《Flask解决指定端口无法生效问题》文章讲述了在使用PyCharm开发Flask应用时,启动地址与手动指定的IP端口不一致的问题,通过修改PyCharm的运行配置,将Flask项目的运行模式从Fla... 目录android问题重现解决方案问题重现手动指定的IP端口是app.run(host='0.0.

Seata之分布式事务问题及解决方案

《Seata之分布式事务问题及解决方案》:本文主要介绍Seata之分布式事务问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Seata–分布式事务解决方案简介同类产品对比环境搭建1.微服务2.SQL3.seata-server4.微服务配置事务模式1

mysql关联查询速度慢的问题及解决

《mysql关联查询速度慢的问题及解决》:本文主要介绍mysql关联查询速度慢的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录mysql关联查询速度慢1. 记录原因1.1 在一次线上的服务中1.2 最终发现2. 解决方案3. 具体操作总结mysql

一文教你解决Python不支持中文路径的问题

《一文教你解决Python不支持中文路径的问题》Python是一种广泛使用的高级编程语言,然而在处理包含中文字符的文件路径时,Python有时会表现出一些不友好的行为,下面小编就来为大家介绍一下具体的... 目录问题背景解决方案1. 设置正确的文件编码2. 使用pathlib模块3. 转换路径为Unicod

Spring MVC跨域问题及解决

《SpringMVC跨域问题及解决》:本文主要介绍SpringMVC跨域问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录跨域问题不同的域同源策略解决方法1.CORS2.jsONP3.局部解决方案4.全局解决方法总结跨域问题不同的域协议、域名、端口

SpringBoot自定义注解如何解决公共字段填充问题

《SpringBoot自定义注解如何解决公共字段填充问题》本文介绍了在系统开发中,如何使用AOP切面编程实现公共字段自动填充的功能,从而简化代码,通过自定义注解和切面类,可以统一处理创建时间和修改时间... 目录1.1 问题分析1.2 实现思路1.3 代码开发1.3.1 步骤一1.3.2 步骤二1.3.3

基于Python开发PDF转Doc格式小程序

《基于Python开发PDF转Doc格式小程序》这篇文章主要为大家详细介绍了如何基于Python开发PDF转Doc格式小程序,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 用python实现PDF转Doc格式小程序以下是一个使用Python实现PDF转DOC格式的GUI程序,采用T

基于.NET编写工具类解决JSON乱码问题

《基于.NET编写工具类解决JSON乱码问题》在开发过程中,我们经常会遇到JSON数据处理的问题,尤其是在数据传输和解析过程中,很容易出现编码错误导致的乱码问题,下面我们就来编写一个.NET工具类来解... 目录问题背景核心原理工具类实现使用示例总结在开发过程中,我们经常会遇到jsON数据处理的问题,尤其是

springboot3.4和mybatis plus的版本问题的解决

《springboot3.4和mybatisplus的版本问题的解决》本文主要介绍了springboot3.4和mybatisplus的版本问题的解决,主要由于SpringBoot3.4与MyBat... 报错1:spring-boot-starter/3.4.0/spring-boot-starter-