学校的压迫下,三天开发一个小程序。作品做的不太好,但是对于基本界面的编写及数据交互算是有了一些了解,做一下记录。
一、 首页的实现
首页主要解决了轮播图、横向平分布局、以及页面跳转相关问题。
二、代码实现介绍
wxml部分
<!--index.wxml-->
<view class="top" > <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> <block wx:for="{{imgUrls}}" > <swiper-item> <image src="{{item}}" class="slide-image" /> </swiper-item> </block> </swiper></view><view class="button_list"> <view class="AQ" > <image src="../img/qa.png" bindtap="passQuery" data-index="1" ></image> </view> <view class="AQ"> <image src="../img/shi.png" bindtap="passQuery" data-index="2"></image> </view> <view class="AQ"> <image src="../img/ge.png" bindtap="passQuery" data-index="3"></image> </view></view><view class="button_list"> <view class="AQ"> 小听问答 </view> <view class="AQ"> <label>诗情乐意</label> </view> <view class="AQ"> <label>藏乐阁</label> </view></view><view style="margin-left:3px;font-size:35rpx">每日推荐</view><view class="music_list"> <view class="ml" > <image src="http://47.100.192.102/f1.png" bindtap="tomusic" data-index="1" ></image> </view> <view class="ml"> <image src="http://47.100.192.102/f2.png" bindtap="tomusic" data-index="2"></image> </view> <view class="ml"> <image src="http://47.100.192.102/f3.png" bindtap="tomusic" data-index="3"></image> </view></view><view class="music_list"> <view class="ml" > <image src="http://47.100.192.102/f4.png" bindtap="tomusic" data-index="4" ></image> </view> <view class="ml"> <image src="http://47.100.192.102/f5.png" bindtap="tomusic" data-index="5"></image> </view> <view class="ml"> <image src="http://47.100.192.102/f6.png" bindtap="tomusic" data-index="6"></image> </view></view>
<!--index.wxml-->
js部分,主要和data相关
//index.js//获取应用实例const app = getApp()
Page({ data: { imgUrls: [ '../img/1.jpg', '../img/2.jpg', '../img/3.jpg', '../img/4.jpg', '../img/5.jpg', '../img/6.jpg' ], indicatorDots: true, autoplay: true, interval: 5000, duration: 1000 },
passQuery: function (e) {
// 传递的参数
let query = e.currentTarget.dataset['index']; if(query==1){ wx.navigateTo({ url: '../anwser/anwser', }) }else if(query==2){ wx.navigateTo({ url: '../poem/poem', }) }else{ wx.navigateTo({ url: '../lib/lib', }) }
}, tomusic:function(e){ // 全局定义 let query = e.currentTarget.dataset['index']; app.data.id = query; wx.navigateTo({ url: '../listen/listen', })
}
})
wxss 部分
/**index.wxss**/
.top{ width: 100%; height:400rpx; }.top image{ width: 100%; height: 100%;}.button_list{ display: flex; align-items: center; width: 100%; flex-direction: row; padding-top: 5rpx;
}
.button_list image{ width: 120rpx; height: 120rpx; vertical-align:top;}
.AQ{ width: 120rpx; height: 120rpx; text-align: center; flex:1; font-size: 35rpx;}.music_list{ display: flex; align-items: center; width: 100%; flex-direction: row; margin-top: 10rpx;}.music_list image{ width: 90%; height: 220rpx; vertical-align:top;}.ml{ width: 90%; height: 220rpx; text-align: center; flex:1;}
/**index.wxss**/
需要注意的点
首页实现中,下面的每日推荐涉及到跳转后传值。采用了全局变量的改变来实现这一点。