小程序模板網(wǎng)

雜項:自定義彈窗,開發(fā)小技巧,使用一像素邊框樣式

發(fā)布時間:2018-02-06 15:47 所屬欄目:小程序開發(fā)教程

本文為一些雜項的聚合;

 


首先wxml代碼:

 

  1. <view class="myToast" hidden="{{nullHouse}}">暫無有關(guān)信息</view>
  2. <view bindtap="clickArea">點擊此處</view>  
  3. 注:hidden屬性用于切換比較頻繁的地方。

wxss代碼設(shè)置彈窗樣式:

 

  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. opacity: 0.85;
  13. }

js:

 

  1. Page({
  2.  
  3. data:{
  4. nullHouse:true, //先設(shè)置隱藏
  5. },
  6. onLoad:function(options){
  7. // 頁面初始化 options為頁面跳轉(zhuǎn)所帶來的參數(shù)
  8. },
  9. onReady:function(){
  10. // 頁面渲染完成
  11. },
  12. onShow:function(){
  13. // 頁面顯示
  14. },
  15. onHide:function(){
  16. // 頁面隱藏
  17. },
  18. onUnload:function(){
  19. // 頁面關(guān)閉
  20. },
  21. clickArea:function(){
  22. var that = this;
  23. this.setData({
  24. nullHouse:false, //彈窗顯示
  25. })
  26. setTimeout(function(){
  27. that.data.nullHouse = true, //1秒之后彈窗隱藏
  28. },1000)
  29. },
  30. })

注:setTimeout()函數(shù)是異步的,當(dāng)計算機執(zhí)行到setTimeout時,此任務(wù)先暫停并保存,繼續(xù)執(zhí)行后續(xù)未完成的任務(wù),當(dāng)條件滿足時,再將setTimeout的執(zhí)行任務(wù)放回任務(wù)隊列的后面,等待執(zhí)行。

 

二:開發(fā)小技巧

1、js里面如何獲取data里面定義的值:this.data.參數(shù)名,例如在data里面定義了一個num = 1,我要得到一個num,應(yīng)該這樣寫this.data.num;

2、將內(nèi)容存為全局的:在app.js,里面定義一個變量a,在存的頁面 getApp().globalData.a = 你要存的信息;

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

4、如果是渲染層報錯:可能原因是:xml頁面里面調(diào)用了方法,或者{{}}沒有配對。

5、跳轉(zhuǎn)頁面代碼:

① wx.navigateTo({url:"跳轉(zhuǎn)的路徑"}); 例如:wx.navigateTo({url:"../shopcar/shopcar"});這個自帶返回上一頁的功能,但是只能最多打開五個頁面。  ②wx.redirectTo({url:"跳轉(zhuǎn)的路徑"});會關(guān)閉當(dāng)前頁面再跳轉(zhuǎn)到另外一個頁面

6、返回上一個頁面:wx.navigateBack({delta: 1});delta:后面接返回的頁面層數(shù)

 

三:自用樣式解決方案:使用一像素邊框

作者:haoranw,原文地址  import 'common.scss'  在需要1px邊框的元素樣式的開頭添加@include px-border(#color,(some_position));。 其中color為邊框顏色,some_position中填入需要邊框的方位(不填則默認(rèn)為所有方向),  例如:@include px-border(#000,(top,right));,將會生成上方和右方的黑色邊框;@include px-border(#000);,將在四周生成黑色邊框。  使用任何你喜歡的構(gòu)建工具或編輯器插件將.scss產(chǎn)出為.wxss。  common.scss:


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


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/21638.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢