碧血红天的HomePage

微信小程序 — 实现一个商品展示

这里,我们来实现一个在首页或则列表展示的商品样式。实现的效果如下图所示:

可以对上面的样式进行分解,可以获得如下信息:

1.整个Item是与视口边缘偏移了一定像素。

2.显示布局位上下,下部信息显示又分为左右。

3.整个Item使用了圆角效果。

4.存在一个购买按钮,需要实现如何监听当前点击的商品

整个框体的样式

.goods_item_container {
  height:290px;
  background-color: #fff;
  margin: 12px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
}

我们依然通过flex布局显示,需要设置flex的方向位列模式。背景填充为白色。margin就是设置整个框体与周围的偏移像素。

定义图片样式

.goods_item_img_container {
  display: flex;
  justify-content: center;
}

图片样式就很简单,我们需要设置下图片水平居中显示,其它参数再wxml中进行设置:

<view class="goods_item_img_container" bindtap="OnBindDetail">
    <image src="/res/swiper_1.jpg" mode="aspectFit"></image>
  </view>

我们为点击图片响应了一个OnBindDetail函数,此函数需要在.js文件中进行定义:

  /**
   * 组件的方法列表
   */
  methods: {
    OnBindDetail(){
      wx.navigateTo({
        url: '/pages/detail/detail',
      })
    }

然后下面的价格个后面按钮是左右布局,我们需要定义一个左右布局的样式

左右布局样式

.good_item_h_layout {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

我们使用了justify-content:space-between。此属性的作用就是告诉下面的元素是靠左右两端的方式排列。

按钮样式

我们需要定义一个红色的按钮样式,如果使用系统自带的button控件,会发现自己的样式怎么没用生效,如果使用系统的button控件,样式的定义需要覆盖整个按钮默认的样式定义:

.good_item_btn {
  position:relative;
  display:block;
  /* margin-left:auto; */
  /* margin-right:auto; */
  padding-left:0px;
  padding-right:0px;
  /* box-sizing:border-box; */
  font-size:12px;
  text-align:center;
  /* text-decoration:none; */
  line-height:0.8;
  border-radius:6px;
  -webkit-tap-highlight-color:transparent;
  overflow:hidden;
  color:#fff;
  background-color:#ff0000;
}

.good_item_btn_hover {
  background-color:#e66666;
}

我们可以直接修改上面的样式信息来达到修改默认Button样式的目的。

整个wxml的写法

<!--components/goods_item/goods_item.wxml-->
<view class="goods_item_container">
  <view class="goods_item_img_container" bindtap="OnBindDetail">
    <image src="/res/swiper_1.jpg" mode="aspectFit"></image>
  </view>
  
  <text class="goods_item_name">纯高粱酒53°</text>
  <view class="good_item_h_layout">
    <text class="goods_item_price">¥52.00</text>
    <view class="good_item_buy_btn">
      <button class="good_item_btn" hover-class="good_item_btn_hover">加入购买</button>
    </view>
  </view>
</view>

整个样式

/* components/goods_item/goods_item.wxss */

.goods_item_container {
  height:290px;
  background-color: #fff;
  margin: 12px;
  border-radius: 8px;
  display: flex;
  /* justify-content: center; */
  flex-direction: column;
}

.goods_item_img_container {
  display: flex;
  justify-content: center;
}

.goods_item_name {
  font-size: 14px;
  color: #010101;
  margin-left: 15px;
}

.good_item_h_layout {
  display: flex;
  justify-content: space-between;
  /* background-color: #000; */
  align-items: center;
}

.goods_item_price {
  display: flex;
  font-size: 14px;
  margin-top: 4px;
  margin-left: 15px;
  color:#ff0000;
  /* flex-grow: 0.9; */
  /* background-color: royalblue; */
}

.good_item_buy_btn {
  height:20px;
  width:65px;
  border-radius: 8px;
  color:#fff;
  background-color: red;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  margin-right: 10px;
}

.good_item_btn {
  position:relative;
  display:block;
  /* margin-left:auto; */
  /* margin-right:auto; */
  padding-left:0px;
  padding-right:0px;
  /* box-sizing:border-box; */
  font-size:12px;
  text-align:center;
  /* text-decoration:none; */
  line-height:0.8;
  border-radius:6px;
  -webkit-tap-highlight-color:transparent;
  overflow:hidden;
  color:#fff;
  background-color:#ff0000;
}

.good_item_btn_hover {
  background-color:#e66666;
}

251 评论

  1. You have observed very interesting points! ps nice web site.

  2. hi opp ggeis 2022 ert go fi

  3. Harvoni India Price Buy Harvoni daklinza price in india

  4. mail order viagra natural viagra alternative generic viagra 100mg

  5. Hello There. I found your blog using msn. This is an extremely well written article. I will be sure to bookmark it and come back to read more of your useful info. Thanks for the post. I will certainly comeback.

  6. levitra club Shown are polymerase chain reaction products amplified from genomic DNA isolated from Mybp3 fl NEO fl NEO, Mybp3 fl FLPeR, Mybp3 fl fl, Mybp3 fl О± MyHC MerCreMer, and Mybp3 fl fl О± MyHC MerCreMer mice

  7. lyrica garrett instagram lyrica high dose lyrica or gabapentin

  8. Współzałożyciel portalu APYnews. Zainteresowany tematyką wideo w internecie oraz influencer marketingiem od blisko 10 lat. Jednokrotnie oglądamy teleturnieje telewizyjne z zapartym tchem i zastanawiamy się: co byśmy zrobili z taką wygraną? Tylko ile faktycznie ta kwota wynosi? Przypuśćmy, że wygrana wynosi 100 000 zł. Pamiętając o tym, że procentowa część kwoty wygranej jest zawsze zryczałtowana i wynosi stałe 10 proc., nie trudno obliczę tę wartość z proporcji. Jeśli fiskus zabiera dziesięć procent z wygranej w wysokości 100 000 zł, to kwota, która trafi do zwycięzcy wyniesie 90 000 zł.  Okazuje się, że doskonałą formą na zwiększenie zysków z takiego “biznesu” jest manipulacja i propaganda, przy użyciu Youtube, lub Twitcha. https://midnightdashboard.com/community/profile/elenamccutcheon/ “Dlaczego chcesz zgłosić nadużycie w tej recenzji? Zestaw Zawiera: Waga gabarytowa w gramach: 12000 Na razie nie dodano żadnej recenzji. kurier GLS (14.90 zł) – 1 dzień roboczy Dowiedz się więcej o Leasingu 1419. Opti poker Poka¿ na stronie: Elegancka dꢯwa walizka z logiem Poker Range mie¶ci wszystko co jest potrzebne dla 3-8 osby zacz±栺abaw꠷ pokera. ¯etony o ¶rednicy 40 mm i grubo¶ci 3,5 mm s± wykonane z twardego kompozytu. Zawarto¶栯pakowania to m.in. 300 ¿etonokerowych, o wadze 14g: Solidna aluminiowa walizka z aksamitn± wy¶ci, mie¶ci wszystko co jest potrzebne, by zacz±栺abaw꠷ pokera. ¯etony o ¶rednicy 40 mm i grubo¶ci 3,5 mm s± wykonane z twardego kompozytu. Idealny zestaw dla graczy poszukuj±cych pokerowych akcesoriajwy¿szej jako¶ci. Liczba graczy: 2 i wi꣥j Wiek graczy: od 14 lat Edycja: angielska Wymiary pude³ka: 405x240x75 mm PUDE£KO ZAWIERA: 300 szt. ¿etonokerowych: 100 bia³ych 50 czerwonych 50 zielonych 50 niebieskich 50 czarnych 2 talie kart 1 ¿eton “”Dealer”” 1 ¿eton “”Small blind”” 1 ¿eton “”Big blind”” 5 kostek do gry”

  9. cheap vardenafil tablets vardenafil dosage what is another name for vardenafil 20mg

  10. vardenafil levitra staxyn levitra 20mg tablets liquid vardenafil dosage

  11. naturally like your web-site but you have to take a look at the spelling on several of your posts. Several of them are rife with spelling issues and I in finding it very troublesome to inform the truth then again I will surely come back again.

  12. Keep up the superb work, I read few content on this internet site and I think that your web site is very interesting and has got lots of wonderful info .

  13. generic for zyprexa zyprexa copay card zyprexa for migraines

  14. During a yoga session, you position your body in various poses that require bending, twisting, and stretching what was viagra originally for

  15. does zyprexa show up on drug test zyprexa for sleep zyprexa cost canada

  16. Third generation AIs exhibit great potency and specificity for aromatase and can reduce serum estrogen levels 95 buying cheap propecia

  17. Thank you for sharing excellent informations. Your website is so cool. I’m impressed by the details that you have on this blog. It reveals how nicely you perceive this subject. Bookmarked this web page, will come back for more articles. You, my pal, ROCK! I found simply the information I already searched all over the place and simply couldn’t come across. What a great site.

  18. vardenafil pharmacy levitra price vardenafil brand name india

  19. zyprexa anderson twin what is zyprexa taken for zyprexa for fibromyalgia reviews

  20. cialis allemagne le cialis cialis 20mg effets secondaires

  21. what is arimidex used to treat why is arimidex so expensive what is arimidex good for

  22. Women using endocrine therapy for shorter time periods are at increased risk of recurrence and have higher mortality Hsieh et al tamoxifen 20 mg

  23. Hi, just required you to know I he added your site to my Google bookmarks due to your layout. But seriously, I believe your internet site has 1 in the freshest theme I??ve came across. It extremely helps make reading your blog significantly easier.

  24. ou trouver du cialis tadalafil 5mg prix en pharmacie order cialis online

  25. Wow! Thank you! I constantly wanted to write on my website something like that. Can I implement a fragment of your post to my site?

  26. sildenafil 25 mg viagra sans ordonnance viagra avec ou sans ordonnance

  27. купить sofosbuvir daclatasvir plus sofosbuvir how does sovaldi work

  28. sildenafil mylan 100 mg prix viagra homme viagra 50

  29. is sovaldi covered by insurance is sovaldi available in pakistan sovaldi price drop

  30. sildenafil citrate walgreens generic viagra cheapest generic viagra

  31. Can I just say what a relief to find somebody who truly knows what theyre speaking about on the internet. You undoubtedly know learn how to carry a problem to gentle and make it important. More individuals have to learn this and understand this facet of the story. I cant consider youre no more popular because you positively have the gift.

  32. I conceive other website owners should take this internet site as an example , very clean and excellent user pleasant layout.

  33. hydroxychloroquine women hydroxychloroquine discount canada order hydroxychloroquine

  34. plaquenil cout usa plaquenil en ligne plaquenil rabais canada

  35. I’ve been absent for some time, but now I remember why I used to love this website. Thank you, I will try and check back more often. How frequently you update your site?

  36. comment obtenir une ordonnance pour le plaquenil plaquenil a vendre canada prix plaquenil nz

  37. buy generic 100mg viagra online sildenafil citrate 100mg tab sildenafil 50mg

  38. I like the helpful info you provide in your articles. I will bookmark your weblog and take a look at again here regularly. I am moderately sure I’ll be informed lots of new stuff right right here! Good luck for the following!

  39. It’s a pity you don’t have a donate button! I’d without a doubt donate to this outstanding blog!
    I suppose forr now i’ll settle for bookmarking andd adding
    your RSS feed to my Google account. I look forward to brand neww updates and will talk about this site with my Facebook
    group. Chat soon!

    my site … cialis levitra kamagra viagra cual es mejor

  40. antacids and gabapentin gabapentin gabapentin insomnia dose

  41. star game online casino slot casino online la vegas casino online

  42. the best online casino for roulette zone online casino msn games australian online casino

  43. Good day! I could have sworn I’ve visited this
    blog before but after lookinjg at some of the posts I realizeed it’s
    new to me. Nonetheless, I’m definitely delighted I
    stumbled upon it and I’ll be bookmarking it and checking backk often!

    Feel fee too visit my web blog; viagrahq.quest

  44. msn zone online casino hollywood casino online gta online casino

  45. Thank you, I’ve recently been looking for information about this topic for a while and yours is the
    best I’ve discovered so far. But, what concerning the botto line?
    Arre you certain concerning the source?

    Feel free to surf to my homepage :: average cost of generic propecia

  46. sun palace online casino 777 online casino betsson online casino

  47. online game casino luckyland slots app promo codes online casino games for real money

  48. Post writing is also a fun, if you know then you can write or else it is difficult to write.

  49. caesars online casino luckylands hardrock online casino

  50. quetiapine 25 mg price in usa quetiapine 200 mg price how much is quetiapine cost

  51. seroquel 250 mg seroquel 10 mg seroquel from mexico

  52. A person essentially lend a hand to make critically posts
    I would state. This is the first time I frequented your web page and
    so far? I amazed with the research you made to create this particular put up extraordinary.
    Fantastic task!

  53. gta online casino cars online casino payza online casino games win real money

  54. 900 mg quetiapine quetiapine cap 300mg quetiapine 300 price

  55. Hi there! Someone in my Myspace group shared this site with us so I came to give it a look.
    I’m definitely loving the information. I’m bookmarking and will be tweeting this to my followers!
    Excellent blog and outstanding design.

  56. online poker for free online poker in california poker lessons online

  57. price of quetiapine 25 mg in india cost of quetiapine 300 mg how much is quetiapine 25 mg

  58. generic quetiapine from canada buy quetiapine online no prescription quetiapine generic south africa

  59. That is really interesting, You are an excessively skilled blogger.
    I have joined your rss feed and look forward to searching
    for more of your fantastic post. Additionally, I’ve shared
    your web site in my social networks

  60. medicine seroquel 25 mg seroquel cap 100mg seroquel online order

  61. roulette online gambling online gambling real money usa gambling help online

  62. lyrica doses for fibromyalgia lyrica cost lyrica garrett instagram

  63. Dear zt-page.com Owner, same in this article: Link Text

  64. cialis 10mg daily 20mg cialis tadalafil 50 mg

  65. viagra otc us buy viagra express where can you buy cheap viagra

  66. purchase cheap cialis soft tabs cost of cialis daily que es cialis

  67. tadalafil professional review what is tadalafil made from brand cialis sale

  68. ambrisentan tadalafil ambition overnight pharmacy 4 u cialis cialis commercial 2016

  69. what to do when cialis stops working cialis low prices cheap cialis with dapoxetine

  70. Hello zt-page.com Administrator, exact same listed here: Link Text

  71. tadalafil (megalis-macleods) reviews cialis 20mg for sale cialis effectiveness

  72. best price on tadalafil 20 mg cialis cheap cialis kaufen

  73. sildenafil 50mg tablets uk sildenafil price genuine viagra best price

  74. cialis black online how much is cialis per pill canadian pharmacy non rx cialis

  75. tamsulosin vs. tadalafil cialis com coupons maximpeptide tadalafil review

  76. sildenafil online singapore viagra buy online order real viagra online

  77. price of viagra 100mg tablet sildenafil prices 20 mg 25mg viagra generic

  78. what works better cialis or viagra buy cialis online canada tadalafil works by blocking pde5 nitric oxide

  79. global pharmacy canada phone number canadian pharmacy viagra professional prescription drugs reference

  80. Lopressor canada pharmacy rx discount pharmacy middlesboro ky

  81. Hi, I do think this is a great blog. I stumbledupon it ;
    ) I will come back once again since i have bookmarked it.
    Money and freedom is the greatest way to change, may you be rich
    and continue to guide others.

  82. soma pharmacy online pharmacy technician training online walmart pharmacy toprol xl

  83. lloyds pharmacy online cialis online pharmacy propecia prices online pharmacy that sells soma

  84. discount viagra canadian pharmacy pharmacy rx one discount codes soma rx pharmacy

  85. mood enhancing prescription drugs priligy johor pharmacy rite aid pharmacy viagra cost

  86. pharmacy famotidine medication canadian pharmacy mark marine pharmacy canada

  87. canadian codeine pharmacy click here to canadian pharmacy online ordering prescription drugs from canada

  88. Your style is unique in comparison to other people
    I’ve read stuff from. Thank you for posting when you’ve got the opportunity, Guess I’ll
    just book mark this web site.

  89. tesco pharmacy viagra price med store pharmacy wisconsin canadian pharmacies

  90. buy lyrica generic lyrica 150mg generic pregabalin 75mg sale

  91. georgetown foreign service essay english reflective essay assignment foreign service association march 15th essay

  92. community service essay example essay in english community service essay mural

  93. order lyrica 75mg for sale pregabalin 75mg tablet pregabalin pills

  94. how to write nhs essay what to write in a college essay how to write the title of a show in an essay

  95. Sharing is a great way to empower others.
    Sharing is a great way to empower others.

  96. vibramycin online pharmacy top online pharmacy 247 pharmacy com

  97. canadian pharmacy for viagra online viagra purchase brand viagra online canadian pharmacy

  98. When it comes to online sports betting in the Philippines, OKBET is your best choice. Don’t miss the chance to bet on your team of choice online. Visit here to learn more: OKBET Sports Betting Update

  99. cvs pharmacy little canada mn animal rx pharmacy rx pharmacy forum

  100. sildenafil sale uk prescription for viagra female viagra sale

  101. cialis tadalafil 20 mg 30 tablet walgreen cialis price sildenafil or tadalafil

  102. viagra for sale online uk buy cheap viagra sildenafil 100mg mexico

  103. venlafaxine 150mg no rx As mentioned previously, the critical issue is having a plan for the resection and carrying it out in an orderly fashion

  104. buy cheap viagra online uk female viagra pills australia how to buy viagra in india

  105. buy cialis online india I m fully aware of the possible side effects and the only way to know is to try it yourself, everyones body is different

  106. where can i get viagra in australia generic viagra online fast delivery where to buy viagra online without prescription

  107. buy cialis from canada 60 mg tadalafil can you take tadalafil and ultimate mens peak performance

  108. buy sildenafil australia online viagra from india viagra daily use

  109. Hey! I understand this is somewhat off-topic however I had to ask.
    Does managing a well-established website like yours require a massive amount work?

    I’m brand new to operating a blog but I do write
    in my journal every day. I’d like to start a blog so I can share
    my own experience and feelings online. Please let
    me know if you have any kind of ideas or tips for new aspiring blog owners.
    Thankyou!

  110. best price for viagra generic viagra sale black viagra

  111. cialis daily pricing cheap generic cialis buy cialis in australia online

  112. 2 viagra viagra gel pills can i buy sildenafil online

  113. sildenafil troche hims sildenafil viagra generic

  114. can you buy viagra otc cheap sildenafil online canada sildenafil generic canada

  115. viagra cheap prescription viagra free delivery can you buy real viagra online

  116. viagra tablets online in india viagra online store brand name viagra canada

  117. best price on tadalafil 20 mg max dosage of cialis tadalafil 5 mg brands in india

  118. safest and most reliable pharmacy to buy cialis cialis after prostate surgery cialis coupon walgreens

  119. viagra versus cialis cialis tadalafil treat cialis online no prior prescription

  120. Wow, fantastic blog layout! How long have you been blogging
    for? you made blogging look easy. The overall look of your
    web site is magnificent, as well as the content!

  121. Nice article! I could also recommend you to get the inside scoop on OKBET sports and online casino – from the latest news to tips on how to make the most of your experience. Visit the website at https://tipsnideas.com/

  122. They say they want these hearings to be public, yet they donГў nolvadex vs arimidex

  123. viagra versus cialis cialis for sale toronto cialis soft tabs

  124. seroquel cost in canada seroquel drug seroquel cost

  125. The enzyme encoded by CYP1B1 localizes to the endoplasmic reticulum ER and metabolizes procarcinogens, such as polycyclic aromatic hydrocarbons and 17beta estradiol 31 clomiphene interactions

  126. cialis online india buy generic cialis online maximum dose of tadalafil

  127. cialis and dapoxetine tabs in usa cialis online canada ripoff what is super cialis, cialis dapoxetine

  128. free tadalafil cialis versus viagra liquid cialis dosage

  129. tadalafil dosage priaprysm cialis with dapoxetine 60mg how to relieve back pain cause by tadalafil

  130. Greetings! I know this is kinda off topic but I’d figured I’d ask.
    Would you be interested in trading links or maybe guest authoring a blog
    article or vice-versa? My blog discusses a lot of the same topics as yours and I feel we could greatly benefit from each
    other. If you happen to be interested feel free to shoot me
    an e-mail. I look forward to hearing from you! Terrific blog by the way!

  131. cialis 20 mg viagra versus cialis cialis from canada to usa

  132. lowest cost for viagra sildenafil brand name india sildenafil australia online

  133. new england journal of medicine hydroxychloroquine study medicine hydroxychloroquine plaquenil patient assistance program

  134. how much viagra cost Both contributed to data collection and analysis for studies in this manuscript while participating in the ORISE Research Participation Programs

  135. Thanx for the effort, keep up the good work Great work, I am going to start a small Blog Engine course work using your site I hope you enjoy blogging with the popular

  136. Serum potassium may increment via increased intake, reduced urinary excretion or from redistribution from cells cell damage, eg tumour lysis syndrome or rhabdomyolysis crush syndrome buy generic viagra online Which of the following statements about this lesion is true

  137. viagra 25 mg sildenafil from mexico sildenafil cost australia

  138. cialis without a doctor prescription canada cialis 20mg overnight cialis discount card

  139. sildenafil citrate women sildenafil soft over the counter viagra for women

  140. generic cialis for sale canadian pharmacy for cialis for sale cialis no prerscription

  141. quetiapine for bipolar quetiapine brain damage quetiapine 300 mg price

  142. order cheap lyrica price how can i get lyrica without dr prescription can i purchase generic lyrica without dr prescription

  143. Eur J Cancer 50 9 1657 64, 2014 cialis prices

  144. Heya i am for the first time here. I came across this board and I
    to find It really helpful & it helped me out a lot.
    I am hoping to present one thing back and aid others such as you helped me.

  145. Autumn lglEkttVrOOZxoqrI 6 17 2022 how to buy cialis

  146. university of texas school of nursing at houston online master’s in nursing education homeopathic nursing degrees

  147. Тази кено игра може да се открие в онлайн в казино Efbet, казино Palms Bet и казино Winbet. Columbus Начален Бонус:Страхотен начален пакет с 10 бонус оферти! Keno е една от най-лесните игри в казиното. Не е нужно да знаете нито едно нещо за казино игрите, за да играете онлайн кено. Ако някога сте играли лотарията преди, вече сте изминали по-голямата част от пътя. Независимо от това, ние ще ви дадем стъпка по стъпка как да играете и да печелите пари, играейки кено онлайн. https://miloxrhx986431.loginblogin.com/19034690/с-безплатен-бонус-Бинго Бъди от първите, които ще завъртят напълно новата ни рулетка! Присъедини се и открий всички предимства на нашата платформа! На живо с реално крупие може да играеш на европейска рулетка и френска рулетка. Само днес в Betano имате възможност срещу 10 лв депозит да получите 10 лв Бонус Казино + 90 безплатни врътки на стойност 26 лв. Това е често задаван въпрос от много “комарджии”, но когато играете онлайн рулетка няма опция да излъжете онлайн казиното. При положение, че става въпрос за наземни казина има примери за хора използващи специфични устройства, за да манипулират рулетката в тяхна полза.

  148. best nursing school laptop nursing school study tools study guide for leadership and nursing care management

发表评论