用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 新手教程 查看内容

杂项:自定义弹窗,开发小技巧,使用一像素边框样式

纸飞机 2018-3-8 09:37

本文为一些杂项的聚合;一:微信小程序自定义弹窗作者:孤岛里的猫大王,来自原文地址 首先wxml代码:暂无有关信息点击此处  注:hidden属性用于切换比较频繁的地方。wxss代码设置弹窗样式:.myToast{ width:240rp ...

本文为一些杂项的聚合;

作者:孤岛里的猫大王,来自

原文地址


首先wxml代码:

  1. class="myToast" hidden="{{nullHouse}}">暂无有关信息
  2. bindtap="clickArea">点击此处  
  3. 注:hidden属性用于切换比较频繁的地方。

wxss代码设置弹窗样式:

  1. .myToast{
  2. width:240rpx;
  3. height:130rpx;
  4. line-height: 130rpx;
  5. margin:80rpx 35%;
  6. border-radius:20rpx;
  7. background-color: rgb(114,113,113);
  8. color:rgb(255,255,255);
  9. font-size: 36rpx;
  10. text-align: center;
  11. position: absolute;
  12. z-index: 100;
  13. opacity: 0.85;
  14. }

js:

  1. Page({
  2. data:{
  3. nullHouse:true, //先设置隐藏
  4. },
  5. onLoad:function(options){
  6. // 页面初始化 options为页面跳转所带来的参数
  7. },
  8. onReady:function(){
  9. // 页面渲染完成
  10. },
  11. onShow:function(){
  12. // 页面显示
  13. },
  14. onHide:function(){
  15. // 页面隐藏
  16. },
  17. onUnload:function(){
  18. // 页面关闭
  19. },
  20. clickArea:function(){
  21. var that = this;
  22. this.setData({
  23. nullHouse:false, //弹窗显示
  24. })
  25. setTimeout(function(){
  26. that.data.nullHouse = true, //1秒之后弹窗隐藏
  27. },1000)
  28. },
  29. })

注:setTimeout()函数是异步的,当计算机执行到setTimeout时,此任务先暂停并保存,继续执行后续未完成的任务,当条件满足时,再将setTimeout的执行任务放回任务队列的后面,等待执行。

二:开发小技巧

1、js里面如何获取data里面定义的值:this.data.参数名,例如在data里面定义了一个num = 1,我要得到一个num,应该这样写this.data.num;

2、将内容存为全局的:在app.js,里面定义一个变量a,在存的页面 getApp().globalData.a = 你要存的信息;

3、取全局变量:也是一样的getApp().globalData.a

4、如果是渲染层报错:可能原因是:xml页面里面调用了方法,或者{{}}没有配对。

5、跳转页面代码:

① wx.navigateTo({url:"跳转的路径"}); 例如:wx.navigateTo({url:"../shopcar/shopcar"});这个自带返回上一页的功能,但是只能最多打开五个页面。
②wx.redirectTo({url:"跳转的路径"});会关闭当前页面再跳转到另外一个页面

6、返回上一个页面:wx.navigateBack({delta: 1});delta:后面接返回的页面层数

三:自用样式解决方案:使用一像素边框

作者:haoranw,

原文地址


import 'common.scss'
在需要1px边框的元素样式的开头添加@include px-border(#color,(some_position));。 其中color为边框颜色,some_position中填入需要边框的方位(不填则默认为所有方向),
例如:@include px-border(#000,(top,right));,将会生成上方和右方的黑色边框;@include px-border(#000);,将在四周生成黑色边框。
使用任何你喜欢的构建工具或编辑器插件将.scss产出为.wxss。
common.scss:

  1. // 1px border
  2. @mixin px-border($color,$border:all) {
  3. position: relative;
  4. &:after {
  5. content: " ";
  6. position: absolute;
  7. top: 0;
  8. left: 0;
  9. @if $border == all {
  10. border: 1px solid $color;
  11. }
  12. @else {
  13. @each $member in $border{
  14. border-#{$member}: 1px solid $color;
  15. };
  16. }
  17. width: 200%;
  18. height: 200%;
  19. -webkit-transform: scale(0.5);
  20. transform: scale(0.5);
  21. @media (-webkit-min-device-pixel-ratio:2.5) {
  22. width: 300%;
  23. height: 300%;
  24. -webkit-transform: scale(.33333);
  25. transform: scale(.33333);
  26. }
  27. -webkit-transform-origin: 0 0;
  28. transform-origin: 0 0;
  29. box-sizing: border-box;
  30. }
  31. }
鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏