效果图
布局 wxml
<view class='goods-detail-m' wx:if='{{isShowModel}}'><view class="mask-m"></view><view class="goodsdetail-m"><view class='goodsdetail-m-title'>{{modelText}}</view><view class='goodsdetail-m-body'><view class='goodsdetail-m-body-left' bindtap='cancel'>确定</view><button class='goodsdetail-m-body-right' open-type='share'>转发</button></view></view></view>
wxss
.comment {position: fixed;left: 0;bottom: 0;width: 100%;background: #fff;z-index: #999;}.pen {width: 41rpx;margin-left: 20rpx;height: 41rpx;margin-top: 10rpx;}.pen-div {display: inline-block;vertical-align: top;}.pen-text {display: inline-block;vertical-align: top;}.pen-input {margin-left: 6rpx;line-height: 60rpx;font-size: 24rpx;font-weight: 100rpx;letter-spacing: 2rpx;}.showBottom {width: 100%;height: 86rpx;border-top: 1rpx solid #e1e1e1;}.showText {display: inline-block;vertical-align: top;width: 50%;height: 60rpx;background: #e1e1e1;margin: 15rpx;margin-left: 38rpx;border-radius: 50rpx;}.showButtom {display: inline-block;vertical-align: top;widows: 40%;height: 80rpx;}.comment-number-ioc {widows: 51rpx;margin-left: 48rpx;height: 51rpx;margin-top: 23rpx;}.cnNuberm {position: absolute;width: 45rpx;height: 20rpx;border-radius: 30rpx;background: red;color: #fff;font-size: 18rpx;line-height: 20rpx;text-indent: 4rpx;top: 14rpx;left: 500rpx;}.collect-ioc {width: 51rpx;margin-left: 51rpx;height: 46rpx;margin-top: 20rpx;}.comment-number {display: inline-block;vertical-align: top;}.collect {display: inline-block;vertical-align: top;}.share {display: inline-block;vertical-align: top;}.share-ioc {width: 53rpx;margin-left: 51rpx;height: 46rpx;margin-top: 20rpx;}.send-comment {width: 100%;height: 86rpx;margin: 5rpx;border-top: 1rpx solid #e1e1e1;}.send-input {width: 530rpx;min-height: 65rpx;max-height: 86rpx;height: 65rpx;background: #e1e1e1;border-radius: 30rpx;outline: none;overflow: hidden;padding-left: 20rpx;margin-bottom: 24rpx;}.send-view {display: inline-block;vertical-align: top;margin: 15rpx 15rpx 15rpx 55rpx;}.send-buttom {display: inline-block;vertical-align: top;margin: 18rpx 22rpx 18rpx 18rpx;}.send-text {font-size: 34rpx;font-weight: 320;color: #e1e1e1;}.activty {color: #009a61;}@font-face {font-family: 'icomoon';src: url('fonts/icomoon.eot?qb36fn');src: url('fonts/icomoon.eot?qb36fn#iefix') format('embedded-opentype'),url('fonts/icomoon.ttf?qb36fn') format('truetype'),url('fonts/icomoon.woff?qb36fn') format('woff'),url('fonts/icomoon.svg?qb36fn#icomoon') format('svg');font-weight: normal;font-style: normal;}.iconfont {font-family: "icomoon" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-osx-font-smoothing: grayscale;}@font-face {font-family: 'icomoon';src: url(data:application/font-woff2;charset=utf-8;base64,d09GMgABAAAAAAJsAA0AAAAABmQAAAIXAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cGh4GYACCXhEICoFUgS0LFAABNgIkAx4EIAWDGwdjG0IFyJ4F5Zhrihh6lhvC6tHoDxQRVGNZz+4GGCS75IEtkH8uT+XfE3gCoWPEAytkff7z9/PcJX7Q90Ga1vSjLC3XSTKa0mg00S5I5vzvn/n7UznjAWXRGMMsZLFcAP/lPICrY2EBqz0vYEHHpuUlL6AXjKpu+wZGj81wHkTEUN5EwWb0LAQ8uTFTC8/7X4/13YFGdIMkhFqhICHne0GVdD3FWdkcXy1GHc0SrbZuQJ9zXqus2ZApgQD8owj5sYMIHFAWGFSxAurVSpIw+jlXBjDSnzOVdz1VWagHEDJRTWQgEhIAICj4kRAVOFAH2kENpsE2AAUQCKnIMGpqamuiPtoZhT6kUXsQhdKuN/QDS3Tq9oOIA0RfLas8M83Hi5ZpYvwrxructWngegcUM42G+d/EQZXvgPH1gAC2boj9hFv5X9tQBHY/5PH0A7USCEJWKTidfydUF0DsBSCh8Da20k48BerUCpAAANDsEQKhRisCSY1ZBLIaGxAoahxAoEqD0whUq3EJgXr97rIodUIzhiXoxTLMYQV26FW6pXq1Zmd2rLfkZqKwsrCysoTja/eY1RLYZWDkYC6zhfdly2B0wVZ6n4GtnckwIxNIcPKsJgvSHMI2/t49ZmRgaWArszfQx+QuGAvgIQFuu1P7MLKK1c8M1wCScn8dkaTIcpSoiuqoqT46v6zHcv3EciJJUuW1hiSBDEqpAgA=) format('woff2');font-weight: normal;font-style: normal;}[class^="icon-"], [class*=" icon-"] {/* use !important to prevent issues with browser extensions that change fonts */font-family: 'icomoon' !important;speak: none;font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;line-height: 1;/* Better Font Rendering =========== */-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}.icon-cheveron-down:before {content: "\e900";}.icon-cheveron-left:before {content: "\e901";}.icon-cheveron-right:before {content: "\e902";}.icon-cheveron-up:before {content: "\e903";}.swiper {width: 100%;}/* showModel自定义 start */.goods-detail-m .mask-m {position: fixed;left: 0;top: 0;width: 100%;height: 100%;z-index: 2;}.goods-detail-m .mask-m {background: rgba(0, 0, 0, 0.2);}.goodsdetail-m {position: fixed;top: 380rpx;left: 125rpx;z-index: 4999999999;width: 500rpx;/* height: 190rpx; */background: #fff;}.goodsdetail-m-title {width: 420rpx;/* height: 100rpx; *//* box-sizing: border-box; *//* border: 1rpx solid #aaa; */padding: 30rpx 40rpx 30rpx 40rpx;font-size: 28rpx;color: #aaa;text-align: center;}.goodsdetail-m-body {width: 500rpx;height: 90rpx;display: flex;}.goodsdetail-m-body-left {width: 250rpx;box-sizing: border-box;height: 90rpx;line-height: 90rpx;font-size: 30rpx;color: #aaa;border-top: 1rpx solid #e5e5e6;text-align: center;}.goodsdetail-m-body-right {width: 250rpx;box-sizing: border-box;height: 90rpx;line-height: 90rpx;font-size: 30rpx;color: #3cc51f;border-top: 1rpx solid #e5e5e6;border-left: 1rpx solid #e5e5e6;border-radius: 0;text-align: center;}button {background: #fff;}button::after {border: none;border-radius: 0px;}/* showModel自定义 end */
js
onLoad: function(options) {var that = thisthat.setData({modelText: '我是自定义转发按钮',isShowModel: true})},//点击自定义showModelcancel: function(e) {var that = thisthat.setData({isShowModel: false})},
