您好,登錄后才能下訂單哦!
這篇“微信小程序怎么實(shí)現(xiàn)仿電影網(wǎng)站頁面效果”文章的知識點(diǎn)大部分人都不太理解,所以小編給大家總結(jié)了以下內(nèi)容,內(nèi)容詳細(xì),步驟清晰,具有一定的借鑒價(jià)值,希望大家閱讀完這篇文章能有所收獲,下面我們一起來看看這篇“微信小程序怎么實(shí)現(xiàn)仿電影網(wǎng)站頁面效果”文章吧。
微信小程序仿貓眼
實(shí)現(xiàn)效果圖:
movie.js
Page({ data: { movies:null, scrollTop : 0, scrollHeight:0 }, onLoad: function (options) { // 生命周期函數(shù)--監(jiān)聽頁面加載 // 這里要非常注意,微信的scroll-view必須要設(shè)置高度才能監(jiān)聽滾動事件,所以,需要在頁面的onLoad事件中給scroll-view的高度賦值 var that = this; wx.getSystemInfo({ success:function(res){ console.info(res.windowHeight); that.setData({ scrollHeight:res.windowHeight }); } }); that.getAllMovies(); }, getAllMovies() { let thispage=this; //展示 加載框 wx.showToast({ title: '加載中', icon: 'loading', duration: 10000 }) //網(wǎng)絡(luò)請求數(shù)據(jù) wx.request({ url: 'http://m.maoyan.com/movie/list.json?type=hot&offset=0&limit=1000', method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT header: {'content-type':'json'}, // 設(shè)置請求的 header success: function(res){ // success let obj=res.data.data.movies; //將獲取到的數(shù)據(jù)設(shè)置到 page 中的movies上 thispage.setData({movies:obj}); //隱藏加載框 wx.hideToast(); //停止刷新 wx.stopPullDownRefresh(); }, fail: function() { // fail }, complete: function() { // complete } }) }, //點(diǎn)擊事件 itemClick(event){ }, //刷新 onPullDownRefresh: function () { this.getAllMovies(); }, })
movie.json
{ "enablePullDownRefresh": true }
movie.wxml
<view class="top"> <text class="top_text">深圳</text> <view class="top_input"> <input placeholder="Q找影視劇、找影院" /> </view> </view> <view class="item" wx:for="{{movies}}" wx:key="{{index}}" bindtap="itemClick" hover-class="item_press" hover="true" > <view class="pic"> <image src="{{item.img}}"></image> </view> <view class="detail"> <title>{{item.nm}} <text class="threeD" wx:if='{{item["3d"]}}'>3D</text> <text class="iMax" wx:if='{{item["imax"]}}'>IMAX</text> <text class="score" wx:if="{{item.preSale !=1}}">{{item.sc}}<text style='font-size:11px'>分</text> </text> <text class="wish" wx:else>{{item.wish}}<text style='font-size:11px'>人想看</text> </text> </title> <view class="type"> {{item.cat}} </view> <view class="star"> {{item.star}} </view> <view class="showinfo"> {{item.showInfo}} </view> <view class="buy" wx:if="{{item.preSale !=1}}" >購買</view> <view class="buy" wx:else >預(yù)售</view> </view> </view>
movie.wxss
page{ background-color: #f2f2f2; } .top { background-color: #f2f2f2; display: flex; } .top_text { margin-left: 15px; font-size: 15px; padding: 20px 0; } .top_input { border-radius: 10rpx; text-align: center; padding: 4px; font-size: 15px; flex: 1; margin: 10px 20px 10px 10px; background-color: #fff; } .item { background-color: #FFFFFF; position:relative; padding: 10px; display: flex; border-width:1px; border-bottom-style: solid; border-color: #ccc; } .item_press { background-color: #F0F0F0; } .pic image { margin-right: 10px; width: 70px; height: 100px; } .detail{ flex: 1; display: flex; flex-direction: column; } .detail title{ margin-top: 5px; color: #222222; flex: 1; font-size: 16px; } .threeD{ border-radius: 2px; padding: 3px; background-color: #8bb7ce; font-size: 10px; color: white; } .iMax{ border-style:solid; border-width:1px; margin-left: -2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; font-size: 10px; color: #8bb7ce; padding: 2px; } .score, .wish{ float:right; color: orange; margin-right: 15px; } .type, .star{ color: #666666; font-size: 13px; overflow:hidden; white-space: nowrap; text-overflow:ellipsis; width: 210px; flex: 1; } .showinfo{ color: #999999; font-size: 13px; flex: 1; } .buy{ padding: 8px; border-radius: 5px; font-size: 13px; color: #FFFFFF; background-color: #ee4137; float: right; position: absolute; right: 10px; top:52px; }
以上就是關(guān)于“微信小程序怎么實(shí)現(xiàn)仿電影網(wǎng)站頁面效果”這篇文章的內(nèi)容,相信大家都有了一定的了解,希望小編分享的內(nèi)容對大家有幫助,若想了解更多相關(guān)的知識內(nèi)容,請關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。