微信小程序小技巧系列《一》幻灯片,tab导航切换
2016-12-15 14:56
531 查看
作者:gou-tian
来自:github
配合在逻辑页面配置数据实现幻灯片
用于模拟DOM操作
转自:转载地址
来自:github
幻灯片
使用微信小程序原生组件swiper实现。<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> <block wx:for="{{imgUrls}}" wx:key="index"> <swiper-item> <image src="{{item}}" class="slide-image" mode="scaleToFill"/> </swiper-item> </block> </swiper>
配合在逻辑页面配置数据实现幻灯片
Page({ data: { imgUrls: [], indicatorDots: true, autoplay: true, interval: 2000, duration: 1000, }, onLoad: function(){ util.ajax({ url: 'https://api.zg5v.com/index.php/index/show/banner', data: { uid: 194 }, cb: function(res) { setSilde.call(self, res.data.data); } }); } })
tab导航切换
由于微信小程序不能直接操作DOM,所以这里设置一个data-id值。(data-id="{{index}}" )用来模拟DOM操作,来实现导航内容的切换<view class="nav-warp"> <view class="tab"> <block wx:for="{{navItem}}" wx:key="index"> <text bindtap="navToggle" data-id="{{index}}" class="tab-txt {{showItem == index ? 'active' : '' }}"> {{item}} </text> </block> </view> </view>
用于模拟DOM操作
Page({ data: { showItem: 0 }, navToggle: function(e){ this.setData({ showItem: e.target.dataset.id }); util.dataList.call(this, { url: 'https://api.zg5v.com/index.php/index/show/qtshow', data: { uid: 148, fenid: e.target.dataset.id - 1, num: 0 }, cb: util.petAge }); } });
转自:转载地址
相关文章推荐
- java对世界各个时区(TimeZone)的通用转换处理方法(转载)
- java-注解annotation
- java-模拟tomcat服务器
- java-用HttpURLConnection发送Http请求.
- java-WEB中的监听器Lisener
- Android IPC进程间通讯机制
- Android Native 绘图方法
- Android java 与 javascript互访(相互调用)的方法例子
- Debian 7.x 安装Oracle JAVA
- springmvc实现url路由功能
- spring boot 配置 druid/** * 配置druid * Created by adam on 4/11/16. */ @Configuration public class D
- api接口rsa加密
- 介绍一款信息管理系统的开源框架---jeecg
- 聚类算法之kmeans算法java版本
- java实现 PageRank算法
- PropertyChangeListener简单理解