成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

小程序?qū)嵺`（三）：九宮格實(shí)現(xiàn)及item跳轉(zhuǎn)

番茄西紅柿 / 717人閱讀

摘要：效果圖實(shí)現(xiàn)效果圖紅色線包含部分的九宮格效果，并附帶點(diǎn)擊時(shí)間。

效果圖：

 

實(shí)現(xiàn)效果圖紅色線包含部分的九宮格效果，并附帶item點(diǎn)擊時(shí)間。

 

 ------------------------------------------------------------------------------------------------------

 

 具體實(shí)現(xiàn)：

 1、首先添加圖片資源文件

　   在項(xiàng)目根目錄新建一個(gè)目錄，取名為images , 用于存放圖片資源，然后添加進(jìn)入幾張圖片

       

 

 

 2、在home目錄下的home.js 文件中(參照前兩篇小程序?qū)嵺`文章) 進(jìn)行數(shù)據(jù)源的配置

       

      數(shù)據(jù)源為一個(gè)數(shù)組，每個(gè)數(shù)組元素為一個(gè)對(duì)象，該對(duì)象包含name(item文字)，img(item示意圖)，url(點(diǎn)擊該item跳轉(zhuǎn)目錄)

 

 3、依據(jù)列表渲染的知識(shí)點(diǎn)進(jìn)行home.wxml的編程

　   ①、從效果圖上每個(gè)item都被細(xì)線包圍，這是構(gòu)建思路是，外部一個(gè)view，繪制頂部邊框線

       最外層view樣式：

       

      ②、外部view里面每一個(gè)item繪制右側(cè)和下側(cè)的邊框線，  每個(gè)item的寬度設(shè)為33.33333% 意味著一行顯示均分顯示3個(gè)item。

      

       ③、每個(gè)item內(nèi)部包含一個(gè)圖片和一個(gè)文字，且item可以點(diǎn)擊跳轉(zhuǎn)到各自指定的頁面

              這里使用navigation組件

       　　navigation組件有一個(gè)屬性u(píng)rl：當(dāng)前小程序內(nèi)的跳轉(zhuǎn)鏈接 ，指定點(diǎn)擊該組件跳轉(zhuǎn)的頁面路徑

 

       完整代碼：

   home.wxml文件
   class="home_grids">
      for="{{griddata}}" wx:key="item.name">
        "../{{item.url}}/{{item.url}}" class=home_grid>
          "{{item.img}}" class="home_icon">
          class="home_grid_text">{{item.name}}

 

 

　　home.wxss文件

　　.home_grids {
　　  border-top: 1rpx solid #D9D9D9;
　　  overflow: hidden;
　　  margin-top: 10px
　　}

　　.home_grid{
　　  position: relative;
 　　 float: left;
 　　 padding: 20px 10px;
 　　 width: 33.33333333%;
　　  box-sizing: border-box;
　　  border-right: 1rpx solid #D9D9D9;
　　  border-bottom: 1rpx solid #D9D9D9;
　　}

 

 

 

 

 

 

 

--------------------------------------------------------------------------------------

 

小程序?qū)嵺`（一）：主頁tab選項(xiàng)實(shí)現(xiàn)

小程序?qū)嵺`（二）：swiper組件實(shí)現(xiàn)輪播圖效果

小程序?qū)嵺`（三）：九宮格實(shí)現(xiàn)及item跳轉(zhuǎn)

小程序?qū)嵺`（四）：動(dòng)態(tài)控制組件的顯示/隱藏

小程序?qū)嵺`（五）：for循環(huán)綁定item的點(diǎn)擊事件

小程序?qū)嵺`（六）：view內(nèi)部組件排版

小程序?qū)嵺`（七）：頁面間傳值

小程序?qū)嵺`（八）：驗(yàn)證碼倒計(jì)時(shí)功能

小程序?qū)嵺`（九）：返回到上一個(gè)界面并傳值回去

小程序?qū)嵺`（十）：textarea實(shí)現(xiàn)簡單的編輯文本界面

小程序?qū)嵺`（十一）：showModal的使用

小程序?qū)嵺`（十二）：七牛云上傳圖片

 

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/2052.html

相關(guān)文章

  • 如意小程序開發(fā)實(shí)戰(zhàn)：實(shí)現(xiàn)九宮格界面的導(dǎo)航

    摘要：將數(shù)據(jù)呈現(xiàn)到界面之后，我們需要相當(dāng)?shù)臉邮絹砼浜?，代碼如下。效果如下圖我們模板中使用元素來呈現(xiàn)格子，所以每個(gè)格子自然就可以導(dǎo)航了。 作者：如意來自：授權(quán)地址轉(zhuǎn)自：微信小程序聯(lián)盟? 小程序是長在微信上的，是移動(dòng)端的界面，為了能夠更方便的使用，我們常常希望使用九宮格界面的方式作為導(dǎo)航，那要如何實(shí)現(xiàn)呢？ 基于一個(gè)簡單的思考，九宮格就是三行三列，如果把行作為一個(gè)單位，再將每一行分成三列，那是不...

    mindwind 評(píng)論0 收藏0

  • 如意小程序開發(fā)實(shí)戰(zhàn)：實(shí)現(xiàn)九宮格界面的導(dǎo)航

    摘要：將數(shù)據(jù)呈現(xiàn)到界面之后，我們需要相當(dāng)?shù)臉邮絹砼浜?，代碼如下。效果如下圖我們模板中使用元素來呈現(xiàn)格子，所以每個(gè)格子自然就可以導(dǎo)航了。 作者：如意來自：授權(quán)地址轉(zhuǎn)自：微信小程序聯(lián)盟? 小程序是長在微信上的，是移動(dòng)端的界面，為了能夠更方便的使用，我們常常希望使用九宮格界面的方式作為導(dǎo)航，那要如何實(shí)現(xiàn)呢？ 基于一個(gè)簡單的思考，九宮格就是三行三列，如果把行作為一個(gè)單位，再將每一行分成三列，那是不...

    xingqiba 評(píng)論0 收藏0

  • 小程序實(shí)踐（二）：swiper組件實(shí)現(xiàn)輪播圖效果

    摘要：組件類似于中的，實(shí)現(xiàn)類似輪播圖的效果，相對(duì)于的實(shí)現(xiàn)起來更加方便，快捷。swiper組件類似于Android中的ViewPager，實(shí)現(xiàn)類似輪播圖的效果，相對(duì)于Android的Viewpager,swiper實(shí)現(xiàn)起來更加方便，快捷。 效果圖： 首先看下swiper支持的屬性： --------------------------------------------------------...

    番茄西紅柿 評(píng)論0 收藏0

  • 小程序實(shí)踐（一）：主頁tab選項(xiàng)實(shí)現(xiàn)

    摘要：這里不再多具體介紹，只添加一個(gè)小需求，點(diǎn)擊切換相關(guān)頁面，該頁面標(biāo)題要和一致，頁面內(nèi)容也和一致，用于說明效果正確實(shí)現(xiàn)。官方文檔 效果圖： 實(shí)現(xiàn)底部Tab選項(xiàng)，只需要在項(xiàng)目根目錄下的app.json下修改 如圖： --------------------------------------------------------------------------------------...

    番茄西紅柿 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<