小程序模板網(wǎng)

小程序開發(fā)使用weui無效解決方法，<swiper-item>標(biāo)簽中傳入多個(gè)數(shù)組型數(shù)據(jù) ... .

發(fā)布時(shí)間：2018-04-18 10:11 所屬欄目：小程序開發(fā)教程

一：公眾號(hào)及小程序開發(fā)使用weui無效解決方法

 

分享者：lijie627239856，原文地址 
在開發(fā)微信公眾號(hào)過程中,對(duì)于不熟悉前端的童鞋們來說, 
明明引用了css文件,可以就是沒有實(shí)際效果,瞬間懵逼 
其實(shí)這個(gè)是微信官方文檔weui中的BUG,給出的類名全部是以下這種形式

 

				
    
					
  1. 
						<a href="#" class="weui_btn weui_btn_mini weui_btn_default">按鈕</a>
    2. 
				

				

					實(shí)際上,應(yīng)該是這樣的!

				

					 

				

				
    
					
  1. 
						<a href="#" class="weui-btn weui-btn_mini weui-btn_default">按鈕</a>
    2. 
				

				

					注意:類名中的"-"和"_"這兩個(gè)的位置

				

					我總結(jié)了下,首先"weui"這部分的后邊用的是"-";

				

					而再后邊如果還有內(nèi)容的話就全部用"_"這個(gè)下劃線了;  更多請(qǐng)見：跳坑《一百六十九》使用WEUI-WXSS相關(guān)知識(shí)

				

					 

				

					二：<swiper-item>標(biāo)簽中傳入多個(gè)數(shù)組型數(shù)據(jù)

				

					 

				

					分享者：zhenxue007，原文地址  在<swiper-item>中用for循環(huán)傳入多個(gè)成對(duì)不同數(shù)據(jù)時(shí)的實(shí)現(xiàn)方法。

				

					效果如下：

				

					

				

					遍歷實(shí)現(xiàn)方法：wxss省略：

				

					wxml中代碼：

				

					 

				

				
    
					
  1. 
						<!--導(dǎo)航部分輪播圖-->
    2. 
					
  2. 
						<swiper class="navban" indicator-dots="{{indicatorDots}}" interval="{{interval}}" duration="{{duration}}">
    3. 
					
  3. 
						<swiper-item>
    4. 
					
  4. 
						<block wx:for="{{navs}}">
    5. 
					
  5. 
						<view class="navbox">
    6. 
					
  6. 
						<image class="navimg" src="{{item.navimg}}"></image>
    7. 
					
  7. 
						<text class="navtext">{{item.navtext}}</text>
    8. 
					
  8. 
						</view>
    9. 
					
  9. 
						</block>
    10. 
					
  10. 
						</swiper-item>
    11. 
					
  11. 
						</swiper>
    12. 
				

				

					相對(duì)應(yīng)js里面的代碼：

				

					 

				

				
    
					
  1. 
						var app = getApp()
    2. 
					
  2. 
						Page({
    3. 
					
  3. 
						data: {
    4. 
					
  4. 
						navs:[
    5. 
					
  5. 
						{ navimg:'/images/i01.png', navtext:'掌上信息'},
    6. 
					
  6. 
						{ navimg:'/images/i02.png', navtext:'商家'},
    7. 
					
  7. 
						{ navimg:'/images/i03.png', navtext:'搶購'},
    8. 
					
  8. 
						{ navimg:'/images/i04.png', navtext:'搶福利'},
    9. 
					
  9. 
						{ navimg:'/images/i05.png', navtext:'五折卡'},
    10. 
					
  10. 
						{ navimg:'/images/i06.png', navtext:'黑貓活動(dòng)'},
    11. 
					
  11. 
						{ navimg:'/images/i07.png', navtext:'本地圈'},
    12. 
					
  12. 
						{ navimg:'/images/i08.png', navtext:'順風(fēng)車'},
    13. 
					
  13. 
						],
    14. 
					
  14. 
						indicatorDots: true,
    15. 
					
  15. 
						autoplay: true,
    16. 
					
  16. 
						interval: 2000,
    17. 
					
  17. 
						duration: 1000,
    18. 
					
  18. 
						}
    19. 
					
  19. 
						 
    20. 
					
  20. 
						})
    21. 
				

					
		

	




            


            


            

            

                

                    易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開源
                    碼云倉庫:starfork
                

                

                    本文地址：http://22321a.com/wxmini/doc/course/23637.html 復(fù)制鏈接 
                    如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢：800182392 點(diǎn)擊咨詢 
                

            

          

          

        

      

      
    

  







  

    
  









  
  

    
    
    

    

     QQ在線咨詢