1、底部的tabBar
可設置的屬性有color、selectedColor、borderStyle、backgroundColor、list至少2個,最多5個(其屬性有pagePath、text、iconPath、selectedIconPath等)
"tabBar": {
"color":"#dddddd",
"selectedColor":"#3cc51f",
"borderStyle":"black",
"backgroundColor":"#2B2B2B",
"list": [
{
"pagePath": "pages/movie/movie",
"text": "影院熱映",
"iconPath": "assets/img/dy-1.png",
"selectedIconPath": "assets/img/dy.png"
},
{
"pagePath": "pages/recommend/recommend",
"text": "電影推薦",
"iconPath": "assets/img/tj-1.png",
"selectedIconPath": "assets/img/tj.png"
},
{
"pagePath": "pages/search/search",
"text": "查詢電影",
"iconPath": "assets/img/search-1.png",
"selectedIconPath": "assets/img/search.png"
}
]
},
效果如下圖所示:
2、滑塊視圖容器swiper
swiper
滑塊視圖容器。
屬性名 | 類型 | 默認值 | 說明 | 最低版本 |
---|---|---|---|---|
indicator-dots | Boolean | false | 是否顯示面板指示點 | |
indicator-color | Color | rgba(0, 0, 0, .3) | 指示點顏色 | 1.1.0 |
indicator-active-color | Color | #000000 | 當前選中的指示點顏色 | 1.1.0 |
autoplay | Boolean | false | 是否自動切換 | |
current | Number | 0 | 當前所在頁面的 index | |
interval | Number | 5000 | 自動切換時間間隔 | |
duration | Number | 500 | 滑動動畫時長 | |
circular | Boolean | false | 是否採用銜接滑動 | |
vertical | Boolean | false | 滑動方向是否爲縱向 | |
bindchange | EventHandle | current 改變時會觸發 change 事件,event.detail = {current: current, source: source} |
從公共庫v1.4.0開始,change
事件返回detail
中包含一個source
字段,表示導致變更的原因,可能值如下:
autoplay
自動播放導致swiper變化;touch
用戶划動引起swiper變化;- 其他原因將用空字符串表示。
注意:其中只可放置<swiper-item/>
組件,否則會導致未定義的行爲。
swiper-item
僅可放置在<swiper/>
組件中,寬高自動設置爲100%。
示例代碼:
<swiper indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" class="slide-image" width="355" height="150"/>
</swiper-item>
</block>
</swiper>
<button bindtap="changeIndicatorDots"> indicator-dots </button>
<button bindtap="changeAutoplay"> autoplay </button>
<slider bindchange="intervalChange" show-value min="500" max="2000"/> interval
<slider bindchange="durationChange" show-value min="1000" max="10000"/> duration
Page({
data: {
imgUrls: [
'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
],
indicatorDots: false,
autoplay: false,
interval: 5000,
duration: 1000
},
changeIndicatorDots: function(e) {
this.setData({
indicatorDots: !this.data.indicatorDots
})
},
changeAutoplay: function(e) {
this.setData({
autoplay: !this.data.autoplay
})
},
intervalChange: function(e) {
this.setData({
interval: e.detail.value
})
},
durationChange: function(e) {
this.setData({
duration: e.detail.value
})
}
})
效果如下圖所示:
3、豆瓣API
在瀏覽器中輸入豆瓣電影接口地址
http://api.douban.com/v2/movie/in_theaters
然後F12,打開調試窗口,選擇Console,輸入var a=接口返回的json串,如下圖所示:
然後回車,再輸入a,再回車,即可看到已經格式化的JSON對象,如下圖所示:
3、從接口獲取數據進行綁定
<block wx:for="{{movies}}">
<view class="movie">
<view class="pic">
<image mode="aspectFit" src="{{item.images.medium}}"></image>
</view>
<view class="movie-info">
<view class="base-info">
<text>{{item.text}}</text>
</view>
</view>
</view>
<view class="hr"></view>
</block>
// pages/movie/movie.js
Page({
/**
* 頁面的初始數據
*/
data: {
imgUrls: [
'../../assets/img/001.jpg',
'../../assets/img/002.jpg',
'../../assets/img/003.jpg'
],
indicatorDots: true,
autoplay: true,
interval: 3000,
duration: 1000,
movies:[],
hidden:false
},
/**
* 生命週期函數--監聽頁面加載
*/
onLoad: function (options) {
this.loadMovie();
},
/**
* 生命週期函數--監聽頁面初次渲染完成
*/
onReady: function () {
},
/**
* 生命週期函數--監聽頁面顯示
*/
onShow: function () {
},
/**
* 生命週期函數--監聽頁面隱藏
*/
onHide: function () {
},
/**
* 生命週期函數--監聽頁面卸載
*/
onUnload: function () {
},
/**
* 頁面相關事件處理函數--監聽用戶下拉動作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函數
*/
onReachBottom: function () {
},
/**
* 用戶點擊右上角分享
*/
onShareAppMessage: function () {
},
/**
* 加載電影
*/
loadMovie:function(){
var page = this;
wx.request({
url: 'http://api.douban.com/v2/movie/in_theaters',
header:{
'Content-Type':"application/json"
},
success:function(res){
var subjects = res.data.subjects;
processSubjects(subjects);
page.setData({ movies: subjects, hidden:true});
}
})
},
/**
*
*/
processSubjects: function (subjects) {
//循環
for (var i = 0; i < subjects.length;i++){
var subject = subjects[i];
this.processSubject(subject);
}
},
/**
*
*/
processSubject:function(subject){
//名稱
var title = subject.title;
//導演
var directors = subject.directors;
var directorStr = "";
for (var index in directors){
directorStr= directorStr+directors[index].name+" / ";
}
if(directorStr!=""){
directorStr = directorStr.substring(0,directorStr.length-2);
}
//主演
var casts = subject.casts;
var castStr = "";
for(var index in casts){
castStr= castStr+casts[index].name+" / ";
}
if(castStr!=""){
castStr= castStr.substring(0,castStr.length-2);
}
//類型
var genres = subject.genres;
var genresStr = "";
for(var index in genres){
genresStr = genresStr+genres[index]+" / ";
}
if(genresStr!=""){
genresStr= genresStr.substring(0,genresStr.length-2);
}
//年份
var year = subject.year;
//拼接字符串
var text = "名稱:"+title+"\n導演:"+directorStr+"\n主演:"+castStr+"\n類型:"+genresStr+"\n上映年份:"+year;
subject.text = text;
}
})
4、加載進度條
<view class="body-view">
<loading hidden="{{hidden}}" bindchange="loadingChange">
加載中...
</loading>
</view>
data: {
imgUrls: [
'../../assets/img/001.jpg',
'../../assets/img/002.jpg',
'../../assets/img/003.jpg'
],
indicatorDots: true,
autoplay: true,
interval: 3000,
duration: 1000,
movies:[],
hidden:false
},
/**
* 加載電影
*/
loadMovie:function(){
var page = this;
wx.request({
url: 'https://api.douban.com/v2/movie/in_theaters',
header:{
'Content-Type':"application/json"
},
success:function(res){
var subjects = res.data.subjects;
processSubjects(subjects);
page.setData({ movies: subjects, hidden:true});
}
})
},
5、如果出現請求的URL地址不在合法域名列表中的話,會出現如下問題:
- 解決方案:打開小程序微信公衆平臺設置小程序開發設置,配置服務器合法域名(必須是https),如下圖所示: