Movie自定義組件
Movie自定義組件包含三部分：圖片、標題和圖片，評分可以再單獨寫一個組件。
實現(xiàn)代碼：
<view class="container">
<image class="poster" src="/images/daomengkongjian.jpg"></image>
<text class="title">盜夢空間盜夢空間</text>
</view>
css代碼中我們通過title里面的屬性設(shè)置文字省略效果，為了能夠直觀地感受到效果我們必須給container設(shè)置寬度，當文字超過寬度的時候就會顯示省略號，效果如下圖所示：
.container{
display: flex;
flex-direction: column;
width: 200rpx;
}
.poster{
width: 200rpx;
height: 270rpx;
margin-bottom: 22rpx;
}
.title{
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
}
使用LinUI評分組件快速實現(xiàn)分數(shù)預(yù)覽
首先在自定義組件中引入LInUI的評分組件：
接著就可以直接使用：
<view class="rate-container">
<l-rate count="5" size="22" disabled="{{true}} "score="3"/>
<text class="score">3.0</text>
</view>
wxss代碼：
.rate-container{
margin-top: 6rpx ;
display: flex;
flex-direction: row;
align-items: baseline;
}
.score{
margin-left: 20rpx;
font-size: 24rpx;
}
實現(xiàn)效果：
簡易評分組件的實現(xiàn)思路
通過列表循環(huán)實現(xiàn)多個星星，并通過條件渲染設(shè)置每個星星是否被選中。
數(shù)組中1對應(yīng)為選中，0對應(yīng)為不選中，所以分別為三星、二星、一星
巧用Flex布局的space-between進行分布排列
我們自定義組件Movielist中使用自定義組件movie：
<view class="container">
<view class="title-container">
<text>正在熱映</text>
<text>更多</text>
</view>
<view class="movie-container">
<movie></movie>
<movie></movie>
<movie></movie>
</view>
</view>
我們使用flex布局中的justify-content: space-between;實現(xiàn)均勻的兩端分布：
.container{
padding: 30rpx 28rpx;
}
.title-container{
display: flex;
flex-direction: row;
justify-content: space-between;
}
.movie-container{
display: flex;
flex-direction: row;
justify-content: space-between;
margin-bottom: 28rpx;
}
實現(xiàn)效果如圖所示：
調(diào)整自定義組件間距
在自定義組件中使用一些樣式會沒有效果，所以要要用外部樣式類代替。
外部樣式類externalClasses的使用
我們想要實現(xiàn)類似下圖所示這種效果：
每個movielist之間是有間隔的，這時候我們就要使用外部樣式類。在自定義的組件movielist中引入外部樣式類：
movielist的wxml代碼中使用外部樣式類：
使用自定義組件時傳入樣式：
樣式代碼：
.movie-list{
margin-bottom: 30rpx;
}
為了實現(xiàn)底部有間隔的效果，我們將整個movielist的背景改為透明：
使用組件的的頁面的背景改為淺灰色就能實現(xiàn)上面的效果啦：
為了區(qū)分內(nèi)部組件和外部組價優(yōu)先級可以加個！important
小試牛刀訪問服務(wù)端數(shù)據(jù)
為了實現(xiàn)不同item的標題不同：
在自定義組件中：
使用組件的時候傳入title:
自定義組件中綁定數(shù)據(jù)title：
實現(xiàn)效果：
使用wx.request進行網(wǎng)絡(luò)請求：
請求到的數(shù)據(jù)：
從服務(wù)器加載數(shù)據(jù)分頁數(shù)據(jù)并傳入自定義組件
我們現(xiàn)在將我們的假數(shù)據(jù)替換為服務(wù)器的真實數(shù)據(jù)：
js文件中定義數(shù)組數(shù)據(jù)：
onload函數(shù)中獲取到數(shù)組數(shù)據(jù)并進行數(shù)據(jù)綁定：
wxml文件中傳入數(shù)組數(shù)據(jù)給自定義組件movielist:
使用ES6箭頭函數(shù)解決this指代問題
再將自定義組件movielist的數(shù)據(jù)傳入自定義組件movie,現(xiàn)先將movielist用循環(huán)渲染改造：
<block wx:for="{{movies}}" wx:key="index">
<movie movie="{{item}}"></movie>
</block>
自定義組件Movie中：
我們前面所寫的
其實是錯誤的，this錯誤，我們可以用箭頭函數(shù)解決這個問題：
綁定服務(wù)端電影數(shù)據(jù)
在自定義組件movie綁定數(shù)據(jù)：
<view class="container">
<image class="poster" src="{{movie.images.large}}"></image>
<text class="title">{{movie.title}}</text>
<view class="rate-container">
<l-rate count="5" size="22" disabled="{{true}} "score="{{movie.rating.stars/10}}"/>
<text class="score">{{movie.rating.average}}</text>
</view>
</view>
實現(xiàn)效果：
文章來源：http://www.zghlxwxcb.cn/news/detail-477167.html
完成即將上映和top250
跟正在熱映一樣需要請求數(shù)據(jù)，
傳入數(shù)據(jù)給自定義組件：
然后我們就能看到效果啦：
由于我們請求數(shù)據(jù)的API的前面部分相同，所以我們可以在app.js配置好baseurl:
我們在電影頁面的Js代碼中獲取到APP示例：
用app中的變量請求數(shù)據(jù)：
文章來源地址http://www.zghlxwxcb.cn/news/detail-477167.html
到了這里，關(guān)于微信小程序入門與實戰(zhàn)之電影頁面與實戰(zhàn)自定義組件的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
