含源码|Vol.2认识万能的view(二)-进店有礼的制作

  • • 发表于 1年前
  • • 作者 一人
  • • 1941 人浏览
  • • 2 条评论
  • • 最后编辑时间 1年前
  • • 来自 [技 术]

上一次推送,我们主要分享了view组件的基础使用及自定义底部菜单、透明点击区域的做法。

今天,我们依然围绕view分享第二种延伸使用——带蒙层弹窗。

我们会用到的关键技巧有:

  • view嵌套;
  • 透明点击区域;
  • view的hidden属性(不填默认false,任意值为true);
  • CSS样式(opacity、position);
  • image组件;
  • bindtap绑定点击事件。

我们先来看一个效果图(图片来自花瓣):

如上是商城类小程序经典的运营玩法之一——进店红包,制作如上图效果几乎成了商城类小程序开发的必备技巧。

这里我们提供一种制作思路,具体如下:

1、先用view制作一个透明度80%的黑色区域,宽高100%满屏,固定定位于窗口(position:fixed),设置hidden属性(为方便描述,以下我们称之为“弹窗1”);

2、在弹窗1之内嵌套一个image用于显示红包(这里暂用静态本地图片代替),图片路径可以是在本地也可以是网络路径;

3、在image之内嵌套一个view作为空白点击区域,绝对定位于关闭图标位置,绑定点击隐藏弹窗1的事件;

4、重复步骤3,建立另一个空白点击区域,绝对定位于领取图标位置,绑定点击领取红包的事件及点击隐藏弹窗1的事件。

*高坑预警:制作弹窗类view,我们一般以浏览窗口作为定位参考对象,这样可以保证所有手机用户看到的组件位置基本一致,故此时制作空白点击区域时应注意——属于哪个组件的空白点击区域,该空白点击区域须嵌套在该组件之内,并使用绝对定位,否则可能因为不同手机屏幕尺寸不一致而导致错位,调试时可以暂时设定背景色。

WXML+CSS代码如下(可黏贴预览):
<!--这段是WXML代码-->
<!--进店红包实例-->

<view class='tanc' hidden='{{gifth}}'>
  <view class=’mengc’></view>
  <image class=’rbimg’ src='https://image.ipaiban.com/upload-ueditor-image-20180526-1527304291564037771.png'>
     <view class=’closerb’ bindtap='closegift'></view>
     <view class=’bindbut’ bindtap='enterstore'></view>
  </image>
</view>



/*这段是对应的WXSS代码*/

.tanc{
  width:100%;
  height:100%;
  position:fixed;
  top:0;
  left:0
}
.mengc{
width:100%;
height:100%;
position:fixed;
background:#fff1ba;
opacity:0.8;
top:0;
left:0
}
.rbimg{
width:510rpx;
height:576rpx;
position:fixed;
top:20%;
left:120rpx
}
.closerb{
width:80rpx;
height:80rpx;
position:absolute;
top:0;
right:8rpx
}
.bindbut{
width:480rpx;
height:100rpx;
position:absolute;
top:80%;
right:15rpx
}

关于我们

我们愿意利用每天的三分钟,致力于帮助更多新媒体人从零基础到深度掌握小程序;
我们谨希望在新媒体探索上,一路有你,一起成长;
这,是我们的梦想。

如果你认同我们,请帮我们转发,这将是对我们坚持梦想最大的鼓励!

查看原文更多详细资料,欢迎关注公众号【一人从零开发小应用】(或搜索微信号:xiaochengxu1038):

转载文章 阅读原文

分享到:
评论区(共2条评论)
2条评论
Ctrl+Enter
作者

一人

一人

APP:0 帖子:8 回复:17 积分:478

已加入社区[586]天

小程序开发大白。

作者详情》
Top