微信小程序自定义showModel为转发按钮

效果图

布局 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 */

onLoad: function(options) {var that = thisthat.setData({modelText: '我是自定义转发按钮',isShowModel: true})},//点击自定义showModelcancel: function(e) {var that = thisthat.setData({isShowModel: false})},

微信小程序自定义showModel为转发按钮相关推荐

微信小程序隐藏菜单栏目下转发按钮的几个方法
隐藏微信小程序顶部的转发按钮适用范围:所有的微信小程序方式一.去除页面上的分享代码片段如下,删除即可 //删除页面里的这个分享函数 onShareAppMessage: function (opt ...
微信小程序自定义单选复选按钮组的实现(用于实现购物车产品列表功能)
(一)单选按钮组模型图如下: index.js Page({data: {parameter: [{ id: 1, name: '银色' }, { id: 2, name: '白色' },{ id: ...
微信小程序如何隐藏右上角分享按钮
2019独角兽企业重金招聘Python工程师标准>>> 一.微信小程序右上角有个转发按钮可以分享转发当前页面到群或者微信好友. 右上角胶囊按钮>转发转发可以配置转发是路径参 ...
微信小程序自定义模态框，官方版本与自定义可扩展版本
微信小程序自定义模态框,官方版本与自定义可扩展版本提示:文章最后有源码,可自取文章主要通过模仿官方的模态框进行自定义模态框的设计,我将会先讲述原理,然后给出源码,最后指出一些需要注意的地方提示: ...
微信小程序自定义授权弹框
微信小程序自定义授权弹框最近微信获取用户信息的接口有调整,就是这货:wx.getUserInfo(OBJECT),文档描述如下: 此接口有调整,使用该接口将不再出现授权弹窗,请使用 <butt ...
微信小程序自定义导航栏（带汉堡包菜单）
微信小程序自定义导航栏(带汉堡包菜单) 1.在app.json中 window配置navigationStyle (如果单独页面使用,可在页面的json文件配置) 2.计算相关值整个导航栏的高度: ...
php 微信创建客服,如何给微信小程序内添加客服按钮
这次给大家带来如何给微信小程序内添加客服按钮,给微信小程序内添加客服按钮的注意事项有哪些,下面就是实战案例,一起来看一下. 1. 普通客服按钮添加客服-联系我们 2. 悬浮客服按钮添加,图片自定义大 ...
微信小程序—自定义（城市选择）弹窗组件，将弹窗组件的值传给调用页面并显示（图文）
微信小程序-自定义(城市选择)弹窗组件,并传值 1.新建component文件夹用来存放自定义组件,并在其文件夹内新建cityModal Component,注意不是新建Page 新建完成之后出现四个 ...
微信小程序-自定义导航栏及返回上一级页面的实现
一.参考文章 1.微信小程序自定义navigationBar 2.微信小程序返回上一级页面的实现代码 3.小程序开发--常用布局二.需求在导航栏中需要显示信息的"未读数量",所 ...

微信小程序自定义showModel为转发按钮

微信小程序自定义showModel为转发按钮相关推荐

最新文章

热门文章