碧血红天的HomePage

微信小程序 — 实现我的订单条

今天来介绍一下订单菜单条是怎么做得。我们把一个订单菜单条同样当成一个组件来处理,到时候在Page中直接组装。实现后的样式基本如下:

首先我们来拆分结构,整个容器是上下结构,分别时title,分割线,下满的图标容器。title可以可以看出时一个左右布局,图标容器看出是一个间隔等分布局的。下面我们就具体实现这么一个样式。

整体容器CSS样式

.my-order-container {
  background: #fff;
  border-radius: 8px;
  margin: 12px;
  height: 90px;
}

真个容器我们定义背景色白色,高度根据自己情况合适设置,我这里为90像素高度,border-radius圆角为8像素。然后margin让整个容器离四周12个像素。

然后我们定义一个样式是上下布局的:

.my-order-v-container {
  display: flex;
  flex-direction: column;
}

flex-direction:设置布局方向是纵队,也就是竖向布局。

Title的CSS样式

title可以看见是左侧一个文本,右侧是一个图标或则文本,但是中间分割开的。这种布局是间隔两端布局,但是整体是水平布局的,但是我们要写在my-order-v-container下面,为了改变布局方向,我们再加个水平布局样式:

.my-order-h-container {
  display:flex;
  width: 100%;
  justify-content: space-between;
}

justify-content:是定义布局排列方式的,我们这里使用space-between。就是2端布局的方式。width:100%很重要,否正看见的两端布局是不对的。因为宽度不够。

定义“我的订单”文本的样式“

.my-order-title {
  color: black;
  font-size: 14px;
  margin-left: 14px;
  margin-top: 8px;
  display: flex;
  width: 100%;
}

color:文本颜色。font-size:文本字体大小。margin-left:距离左边空留14像素。margin-top:距离上边空留8像素。display:使用flex布局显示。

定义右边箭头的的CSS样式

.my-order-right-arrow {
  width: 22px;
  height: 22px;
  margin-top: 6px;
  display: flex;
  margin-right: 12px;
}

现在把CSS样式应用上来,组装的wxml的代码如下:

<view class="my-order-container"> 
  <view class="my-order-v-container">
    <view class="my-order-h-container">
      <text class="my-order-title">我的订单</text>  
      <image src="/res/arrow-right.png" mode="aspectFit" class="my-order-right-arrow"  bindtap="bindMoreOrder"></image>
    </view>
  </view>
</view>

分割线的CSS样式

现在我们需要一个一个分割线,它由1个像素组成:

.my-order-title-flex {
  display: flex;
  margin-top: 5px;
  background: #efefef;
  height: 1px;
  width:100%;
}

非常简单,就是使用一个高度是1像素的view视图而已。

图标容器的CSS样式

图标实在水平容器中均分间隔排列,我们可以使用flex的权重值来实现这样的排列,图标的容器样式如下:

.my-order-icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

我们需要使容器里面的原始水平和垂直居中,所以使用了align-item:垂直居中。justify-content:水平居中。

定义图标的CSS样式:

.my-order-icon-flex {
  flex-grow:1;
  width:32px;
  height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 8px;
}

我们顶一个图标的大小,这里的高度是附带了下面文本的高度,flex-grow:代表当前一个修饰的view是1的权重,如果存在多个这个1的权重,那么平级的大家都会均分现有的空间。所以这个实现了均分的效果。

flex-direction:因为我们的文本直接是作为这个样式的子节点,所以我们要高边当前的布局方向,我们使用纵向(垂直)布局。

文本的CSS样式:

.my-order-icon-text {
  font-size: 13px;
  display: flex;
  color:#313030;
  margin-top: -2px;
}

设置了文本的大小,颜色和偏移。

把CSS应用到WXML中的完整代码:

<view class="my-order-container"> 
  <view class="my-order-v-container">
    <view class="my-order-h-container">
      <text class="my-order-title">我的订单</text>  
      <image src="/res/arrow-right.png" mode="aspectFit" class="my-order-right-arrow"  bindtap="bindMoreOrder"></image>
    </view>
    <view class="my-order-title-flex">
    </view>
    <view class="my-order-icon-container">
      <image src="/res/wait_pay.png" mode="aspectFit" class="my-order-icon-flex">
        <text class="my-order-icon-text">待付款</text>
      </image>
      <image src="/res/wait_send.png" mode="aspectFit" class="my-order-icon-flex">
        <text class="my-order-icon-text">待发货</text>
      </image>
      <image src="/res/sending.png" mode="aspectFit" class="my-order-icon-flex">
        <text class="my-order-icon-text">已发货</text>
      </image>
      <image src="/res/order_finish.png" mode="aspectFit" class="my-order-icon-flex">
        <text class="my-order-icon-text">交易完成</text>
      </image>
    </view>
  </view>
</view>

这样就看见是开始发的图片的样式了,这里没有书写点击响应的代码,目前这个重点是讲解如何制作界面样式,动态响应的东西回根据必须性再添加。

65 评论

  1. Heya i am for the first time here. I found this board and I in finding It really useful & it helped me out a lot. I hope to offer something back and aid others such as you aided me.

  2. hi opp ggeis 2022 ert go fi

  3. Heya! I’m at work surfing around your blog from my new iphone 4! Just wanted to say I love reading your blog and look forward to all your posts! Carry on the great work!

  4. buy isotretinoin acnetrex The endometrial thickening was most prominent with the 12

  5. Przez następne miesiące trwało zorganizowane przez Niemców planowe niszczenie lewobrzeżnych dzielnic Warszawy, gdy na prawym brzegu Wisły – przynajmniej formalnie – władzę sprawowali Polacy. To wszystko nie było wygodnym dla władz PRL faktem historycznym, zwłaszcza po 1956 roku, gdy nieco zmieniono sposób przedstawiania Powstania Warszawskiego. Przesunięcie daty przejęcia władzy nad miastem z września 1944 roku na styczeń 1945 roku pozwalało zacierać niekorzystne dla władz skojarzenia i oskarżenia o bierność. 5 Batalion Strzelców Ppodhalańskich im. gen bryg. Andrzeja Galicy w Przemyślu powstał w 2010 roku w wyniku Decyzji Ministra Obrony Narodowej z likwidowanych jednostek wojskowych: 5 batalionu zmechanizowanego w Rzeszowie, polsko-ukraińskiego batalionu sił pokojowych w Przemyślu i 14 batalionu zmechanizowanego. Decyzją Ministra Obrony Narodowej przejęto sztandar i tradycje rozformowanego 5 batalionu zmechanizowanego z Rzeszowa, a także ustanowiono doroczne święto batalionu na dzień 1 października. https://www.colbridge.com/forum/profile/valerianadel267/ Otrzymamy: 17,20 zł do naszego wirtualnego salda, ponieważ płatność przy użyciu PSC kosztuje nas -14% od wpłaty. Jeśli masz jakiekolwiek wątpliwości, skontaktuj się z nami. Strategia Alambert jest przeciwieństwem Martingale, jest jedną z najbezpieczniejszych do użycia na stronach ruletki CSGO. Nikt nie może powiedzieć, która z nich jest najlepsza, ponieważ istnieją różne typy graczy i osobowości, ale jeśli przypadkiem Ci się spodoba, nie zaszkodzi spróbować, ponieważ niesie ze sobą najniższe możliwe ryzyko. Sposób działania jest również prosty – zwiększasz swoje zakłady po przegranej, a zmniejszasz po wygranej. W ten sposób można zachować kontrolę nad swoimi zwycięstwami i porażkami, i zawsze mieć zrównoważone tempo gry. W większości przypadków, jest to metoda, którą nowicjusze wybierają najczęściej.

  6. lasix purchase online You take an STR around the same time every day

  7. does viagra kill sperm cells Again, you want to make sure it s pure, therapeutic grade essential oil or you won t get the actual therapeutic properties

  8. Really Appreciate this update, can I set it up so I receive an update sent in an email whenever you write a fresh update?

  9. This excess creates inflammation cost of accutane

  10. Excellent web site. Plenty of useful info here. I am sending it to some friends ans also sharing in delicious. And certainly, thanks to your sweat!

  11. excellent post, very informative. I ponder why the opposite specialists of this sector do not notice this. You should continue your writing. I am confident, you have a great readers’ base already!

  12. I have been exploring for a little for any high-quality articles or weblog posts on this kind of area . Exploring in Yahoo I at last stumbled upon this website. Studying this info So i am satisfied to express that I have a very just right uncanny feeling I found out just what I needed. I such a lot indubitably will make certain to do not disregard this website and give it a glance on a continuing basis.

  13. Some truly nice and useful information on this internet site, as well I believe the style has got fantastic features.

  14. Very nice post. I just stumbled upon your weblog and wanted to say that I have truly enjoyed surfing around your blog posts. In any case I will be subscribing to your feed and I hope you write again soon!

  15. You really make it seem really easy along with your presentation but I find this topic to be actually something which I think I’d by no means understand. It kind of feels too complicated and extremely vast for me. I’m having a look forward to your subsequent publish, I’ll try to get the cling of it!

  16. whoah this blog is wonderful i love studying your posts. Keep up the great paintings! You realize, many individuals are hunting round for this info, you can help them greatly.

  17. It¦s really a cool and useful piece of info. I¦m happy that you shared this helpful information with us. Please stay us informed like this. Thanks for sharing.

  18. Hi there very cool website!! Man .. Beautiful .. Superb .. I will bookmark your site and take the feeds alsoKI’m glad to search out so many useful information here in the post, we’d like develop extra strategies in this regard, thank you for sharing. . . . . .

  19. Way cool, some valid points! I appreciate you making this article available, the rest of the site is also high quality. Have a fun.

  20. I think you have observed some very interesting points, thanks for the post.

  21. Wow that was strange. I just wrote an incredibly long comment but after I clicked submit my comment didn’t show up. Grrrr… well I’m not writing all that over again. Regardless, just wanted to say excellent blog!

  22. Heya i’m for the primary time here. I came across this board and I find It really useful & it helped me out much. I am hoping to offer one thing back and aid others such as you aided me.

  23. Some times its a pain in the ass to read what website owners wrote but this site is very user genial! .

  24. You completed several nice points there. I did a search on the subject and found the majority of people will go along with with your blog.

  25. Enjoyed looking through this, very good stuff, thanks. “A man may learn wisdom even from a foe.” by Aristophanes.

  26. solubility of tadalafil original cialis tadalafil wiki

  27. what is cialis used for cialis 5mg price comparison cialis 5mg tadalafil

  28. buy generic viagra online usa cost of 100mg sildenafil viagra for sale online uk

  29. how to buy viagra in india cheap sildenafil tablets uk discount viagra pharmacy

  30. cialis price walgreens cialis south africa online cialis tadalafil 10mg

  31. cialis substitute cialis france sanofi cialis

  32. canadian online pharmacies reviews trazodone online pharmacy cvs pharmacy careers apply online

  33. walmart pharmacy permethrin online pharmacy valium reviews affordable drugs canada

  34. fusion rx compounding pharmacy online isotretinoin pharmacy walgreen store hours pharmacy

  35. united pharmacy tramadol target pharmacy xanax cvs pharmacy store manager

  36. health rx pharmacy trustworthy canadian online pharmacy canadian mail order pharmacy ratings

  37. viagra at tesco pharmacy abilify pharmacy canada giant eagle pharmacy

  38. generic viagra – mastercard viagra in usa ildenafil citrate

  39. cialis super active vs regular cialis how to take liquid tadalafil tadalafil 5mg reviews

  40. Severity of gynaecomastia was scored on the basis of the largest diameter best price cialis The filtrate was concentrated in vacuo and redissolved exclusively in acetone

  41. cialis effectiveness cialis 10 mg tablet what is tadalafil

  42. viagra online discount buy generic viagra online paypal viagra pills in india

  43. generic over the counter viagra sildenafil tablets 5mg 75 mg viagra

  44. best site to buy cialis online And in general, capsule supplements absorb better than tablets so find a good quality capsule and you can empty it into a small smoothie if you are able to keep that down

  45. how to buy female viagra online viagra cost in australia sildenafil generic cheap

  46. female viagra tablets uk sildenafil 100 canada sildenafil 20 mg price in india

  47. buy viagra online using paypal canadian viagra no prescription can you purchase viagra over the counter in mexico

  48. where to buy cialis in calgary safely how to get a prescription for cialis tadalafil patent expiry

  49. best online pharmacy for cialis does tadalafil work cialis commercial

  50. 1 The goal of pharmaceutical management accutane back acne

  51. over night cialis cialis for sale brand cialis professional ingredients

  52. can you mix cialis and viagra cialis softtabs online goodrx cialis

  53. cialis coupon code cialis and bph cialis pills for sale

  54. Keep your calendar free of anything that doesn t bring you joy Use free low- cost mindfulness or meditation apps a good addition to your morning or pre- sleep routine Get out in nature never more important than while sheltering- in- place Take advantage of the stress- free and touch- free services offered by specialty fertility pharmacies Keep the romance alive in your partnership Create a soothing nighttime ritual to promote relaxing, healthy sleep habits cheap viagra and proscar By contrast, the worst failure of a typewriter seemed to be when it got too dusty and a key would be slow to retract

  55. how much does cialis cost at walmart cialis lilly when does cialis go off patent

  56. online pharmacy usa viagra buy viagra in usa online female viagra online

  57. tadalafil cialis tadalafil 20mg online buying generic cialis

  58. tadalafil prescribing information cialis 10 mg viagra/cialis black and gold 800

  59. Moreover, findings from some research studies suggest that the availability of information to women about tamoxifen can impact on their decision making process 14, 15, 16 azithromycin chlamydia

  60. it is well known that P o 2 is much lower in the renal medulla than in the renal cortex because of relative underperfusion, the countercurrent O 2 diffusion between descending and ascending vasa recta, and the high metabolic ion transport activity of the thick ascending limb of Henle in the renal medullary region 6, 10 cialis daily

  61. All treatments for breast cancer including targeted therapies, aromatase inhibitors, tamoxifen, radiation, immunotherapy, and more were tested in several clinical trials azithromycin vs doxycycline

发表评论