小程序模板网

小程序开发使用weui无效解决方法,<swiper-item>标签中传入多个数组型数据 ... .

一:公众号及小程序开发使用weui无效解决方法

 

分享者:lijie627239856,原文地址 
在开发微信公众号过程中,对于不熟悉前端的童鞋们来说, 
明明引用了css文件,可以就是没有实际效果,瞬间懵逼 
其实这个是微信官方文档weui中的BUG,给出的类名全部是以下这种形式

 

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

实际上,应该是这样的!

 

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

注意:类名中的"-"和"_"这两个的位置

我总结了下,首先"weui"这部分的后边用的是"-";

而再后边如果还有内容的话就全部用"_"这个下划线了;  更多请见:跳坑《一百六十九》使用WEUI-WXSS相关知识

 

二:<swiper-item>标签中传入多个数组型数据

 

分享者:zhenxue007,原文地址  在<swiper-item>中用for循环传入多个成对不同数据时的实现方法。

效果如下:

遍历实现方法:wxss省略:

wxml中代码:

 

				
  1. <!--导航部分轮播图-->
  2. <swiper class="navban" indicator-dots="{{indicatorDots}}" interval="{{interval}}" duration="{{duration}}">
  3. <swiper-item>
  4. <block wx:for="{{navs}}">
  5. <view class="navbox">
  6. <image class="navimg" src="{{item.navimg}}"></image>
  7. <text class="navtext">{{item.navtext}}</text>
  8. </view>
  9. </block>
  10. </swiper-item>
  11. </swiper>

相对应js里面的代码:

 

				
  1. var app = getApp()
  2. Page({
  3. data: {
  4. navs:[
  5. { navimg:'/images/i01.png', navtext:'掌上信息'},
  6. { navimg:'/images/i02.png', navtext:'商家'},
  7. { navimg:'/images/i03.png', navtext:'抢购'},
  8. { navimg:'/images/i04.png', navtext:'抢福利'},
  9. { navimg:'/images/i05.png', navtext:'五折卡'},
  10. { navimg:'/images/i06.png', navtext:'黑猫活动'},
  11. { navimg:'/images/i07.png', navtext:'本地圈'},
  12. { navimg:'/images/i08.png', navtext:'顺风车'},
  13. ],
  14. indicatorDots: true,
  15. autoplay: true,
  16. interval: 2000,
  17. duration: 1000,
  18. }
  19.  
  20. })


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23637.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询