专注连锁门店会员营销管理系统
线上+线下+进销存+收银+会员2018-07-10 作者:秩名
如图:
如图,本次案例要做的是右下角的客服按钮和蓝色渐变的提示卡片,可随时关闭的。
微信官方给了客服按钮标签
<contact-button type="default-dark" size="100"></contact-button>
这个标签的样式不可修改,如果我们要换自己想改的图片,需要怎么做呢?就像我图片上的样式。
我这个客服控件是放在一个正圆的view里的居中位置,所以,我这里先通过position定位到居中位置,把size放到最大。
然后把透明度设置为0即可,然后给正圆这个view设置一图片背景,图片就是你想要显示的icon
提示卡片
提示卡片是一个view,view里面有一个×用来绑定隐藏事件的,bindtap="onChangeShowState"就是用来隐藏这个view的
index.wxml
<!-- 提示卡片 --> <view class="bright789_view_hide{{showView?'bright789_view_show':''}}"> <view class="bright789-text"> <view bindtap="onChangeShowState" class="close">×</view> <view class="text">有疑问可以点这里咨询哦</view> </view> </view> <!-- 悬浮按钮 --> <view class="zixun"><contact-button type="default-dark" size="100" class="kf"></contact-button></view>
index.wxss
.zixun{ width: 55px; height: 55px; background: url(http://wxpad.cn/yunpan/cdn/imgsrc/1530949769.png)no-repeat; position: fixed; bottom: 35px; right: 35px; border-radius: 50%; box-shadow: 0 0 5px #ddd; text-align: center; font-size: 14px; color: #333; } .zixun .kf{ position: relative; top: 0px; left: 0px; margin:15px auto; opacity: 0; } .bright789-text{ position: fixed; bottom: 100px; right: 65px; width: 200px; height: 45px; background-image: linear-gradient(to left, #4481eb 0%, #04befe 100%); border-bottom-left-radius: 50px; border-top-left-radius: 50px; border-top-right-radius: 50px; z-index: 99999999; box-shadow: 0 0 10px #eee; line-height: 40px; text-indent: 15px; } .bright789-text .close{ font-size: 1.5em; color: #fff; } .bright789-text .text{ font-size: 13px; color: #fff; margin-top: -38px; margin-left: 20px; } .bright789_view_hide{ display: none; }
index.js
//index.js //获取应用实例 const app = getApp() Page({ data: { showView: true }, onLoad: function (options) { // 生命周期函数--监听页面加载 showView: (options.showView == "true" ? true : false) }, onChangeShowState: function () { var that = this; that.setData({ showView: (!that.data.showView) }) } })
OK,制作完成!
HiShop小程序工具提供多类型商城/门店小程序制作,可视化编辑 1秒生成5步上线。通过拖拽、拼接模块布局小程序商城页面,所看即所得,只需要美工就能做出精美商城。更多小程序商店请查看:小程序商店
线上+线下+进销存+收银+会员门店零售管理好帮手
门店能实现快速收银,提升门店经营效率。
系统自带进销存管理,更好管理库存销售。
配备收银硬件一站式整体服务。
收 银 会员管理 库存管理 商品管理 交接班 数据报表 营销促单 售后处理 多种收款
获取报价1、本网站发布的该篇文章,目的在于分享电商知识及传递、交流相关电商信息,以便您学习或了解电商知识,请您不要用于其他用途;
2、该篇文章中所涉及的商标、标识的商品/服务并非来源于本网站,更非本网站提供,与本网站无关,系他人的商品或服务,本网站对于该类商标、标识不拥有任何权利;
3、本网站不对该篇文章中所涉及的商标、标识的商品/服务作任何明示或暗示的保证或担保;
4、本网站不对文章中所涉及的内容真实性、准确性、可靠性负责,仅系客观性描述,如您需要了解该类商品/服务详细的资讯,请您直接与该类商品/服务的提供者联系。
推荐文章
最新消息总结,开发一个小程序我们可以选择的第三方框架有5种,大家比较熟悉的有美团小程序框架mpvue,还有组件化框架等...
最近在调研小程序的分享能力,本篇文档主要是调研小程序关于分享方面的玩法,目的是学习小程序在项目应用以及玩法链上...
许多人在使用小程序,会有一个很麻烦的事情,就是使用过小程序之后,会不断的发送自己的定位消息,那么这个小程序的...
一款小程序,很多时候需要调用内置的照相机,实现拍照并图片上传,那么要如何实现呢?...
积分商城搭建百科 积分商城作为一种有效的用户运营和营销工具,在众多企业和平台中得到广泛应用。它不仅能够增强用户...
积分商城搭建策略百科 1. 积分商城搭建策略概述 积分商城作为一种常见的用户激励机制,在各类平台中发挥着重要作用。它...
积分商城搭建服务商百科 积分商城搭建服务商,是指那些专门为企业或机构提供搭建积分商城相关服务的专业机构。随着市...
积分商城平台搭建全解析 在数字化营销的浪潮中,积分商城平台已成为众多企业提升用户粘性、促进消费转化的重要工具。...
公众号积分商城搭建百科 在数字化营销蓬勃发展的当下,公众号积分商城已成为企业和品牌提升用户活跃度、增强用户粘性...
积分商城搭建流程全解析 在数字化营销浪潮中,积分商城已成为众多企业提升用户粘性、促进消费转化的得力工具。搭建一...