一 概述
“照片”页面任务说明“照片”页面功能开发效果图二 “照片”页面任务说明
每一张轮播的图片都占满显示区域，滑动屏幕可以实现图片的纵向切换在右侧纵向显示指示面板，单击圆点可以切换状态在用户无操作时，可以实现自动无缝轮播三 “照片”页面功能开发
3.1 界面布局(pages/picture/picture.wxml)<swiper indicator-color="white" indicator-active-color="#ff4c91" indicator-dots autoplay interval="3500" duration="1000" vertical circular> <swiper-item wx:for="{{imgUrls}}" wx:key="*this"> <image src="{{item}}" mode="aspectFill" /> </swiper-item> </swiper> 12345 3.2 样式文件(pages/picture/picture.wxss)
swiper{height: 100vh;} image{width: 100vw;height: 100vh;} 12 3.3 功能逻辑文件(pages/picture/picture.js)
Page({ /** * 页面的初始数据 */ data: { imgUrls:[ '../../images/timg1.jpg','../../images/timg2.jpg', '../../images/timg3.jpg','../../images/timg4.jpg' ] }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667四 效果图
