运行结果

点击爱情类别：

wxml

这里我把标签数据直接写固定，在实际项目中是不行的，理论上是需要从后端获取。

<view class="search"><view class="searchBg"><view><!-- 显示搜索图标 --><image src="/images/icon/search-1.jpg" style="width:20px;height:21px;"></image></view><view><input type="text" placeholder="输入你想看的电影名称" placeholder-class="holder" bindblur="searchGoods" id="search" value="{{name}}" /></view></view><!-- 重置数据 --><view class="cancelbtn" bindtap="resetSearch">取消</view>
</view>
<view class="hr"></view><block wx:if="{{movies.length > 0}}">
<!-- 如果有结果显示 --><block wx:for="{{movies}}"><view class="movie" id="{{item.id}}" bindtap="loadMovieDetail"><view class="pic"><!-- <image src="http://127.0.0.1:8181/images/movie/2022/05/30/4c257d518062421b975f87fbe6f1adb4.jpeg" mode="aspectFit" style="width:85px;height:119px;"></image> -->
<!-- 显示海报需要进行字符串的拼接 --><image src="http://127.0.0.1:8181/{{item.moviePoster}}" mode="aspectFit" style="width:85px;height:119px;"></image></view><view class="movie-info"><view class="base-info"><view class="name">{{item.name}}</view><view class="desc">地区：{{item.movieArea}}</view><!-- <view class="desc">测试海报：{{item.moviePoster}}</view> --><view class="desc">上映时间：{{item.releaseDate}}</view><view class="desc">电影类型：{{item.movieCategoryName.movieCategoryName}}</view><view class="desc">时长：{{item.movieLength}}min</view></view></view><view class="btn"><button>观看</button></view></view><view class="hr"></view></block>
</block><block  wx:else>
<!-- 如果没有显示热门搜索 --><view class="hotSearch"><view class="title"><view class="left">热门搜索</view><!-- <view class="right">换一批</view> --></view><view class="tips" ><view class="tip" id="{{1}}"  bindtap="loadMovieDetail" >送你一朵小红花</view><view class="tip" id="{{34}}"  bindtap="loadMovieDetail">开心超人之英雄的心</view><view class="tip" id="{{6}}"  bindtap="loadMovieDetail">我和我的家乡</view><view class="tip" id="{{4}}"  bindtap="loadMovieDetail">沐浴之王</view><view class="tip" id="{{2}}"  bindtap="loadMovieDetail">如果声音不记得</view><view class="tip" id="{{5}}"  bindtap="loadMovieDetail">赤狐书生</view><view class="tip" id="{{8}}"  bindtap="loadMovieDetail">唐人街探案3</view><view class="tip" id="{{9}}"  bindtap="loadMovieDetail">温暖的抱抱</view><view class="tip" id="{{18}}"  bindtap="loadMovieDetail">我不是药神</view><view class="tip" id="{{16}}"  bindtap="loadMovieDetail">哪吒之魔童降世</view></view></view><!-- 如果没有显示热门搜索 -->
<view class="catagorySearch"><view class="title"><!-- <view class="catagorySearchleft">热门搜索</view> --><!-- <view class="right">换一批</view> --></view><view class="catagorySearchleft">类别搜索</view><view class="tips" ><!-- 爱情喜剧 悬疑惊悚犯罪运动西部传记歌舞黑白电影其他历史 --><view class="tip" id="{{1}}" bindtap="loadClickCatagoryMovieDetail">爱情</view><view class="tip" id="{{2}}" bindtap="loadClickCatagoryMovieDetail">喜剧</view><view class="tip" id="{{4}}" bindtap="loadClickCatagoryMovieDetail">剧情</view><view class="tip" id="{{6}}" bindtap="loadClickCatagoryMovieDetail">动作</view><view class="tip" id="{{7}}" bindtap="loadClickCatagoryMovieDetail">科幻</view><view class="tip" id="{{11}}" bindtap="loadClickCatagoryMovieDetail">冒险</view><view class="tip" id="{{12}}" bindtap="loadClickCatagoryMovieDetail">战争</view><view class="tip" id="{{15}}" bindtap="loadClickCatagoryMovieDetail">家庭</view><view class="tip" id="{{16}}" bindtap="loadClickCatagoryMovieDetail">古装</view><view class="tip" id="{{17}}" bindtap="loadClickCatagoryMovieDetail">武侠</view><view class="tip" id="{{19}}" bindtap="loadClickCatagoryMovieDetail">历史</view><view class="tip" id="{{13}}" bindtap="loadClickCatagoryMovieDetail">奇幻</view><view class="tip" id="{{24}}" bindtap="loadClickCatagoryMovieDetail">短片纪录片</view></view></view></block>

wxss

.search{display: flex;flex-direction: row;padding: 5px;
}
.searchBg{background-color: #E8E8ED;width: 80%;display: flex;flex-direction: row;height: 30px;line-height: 30px;
}
.searchBg image{margin-left: 10px;margin-top:5px;
}
.search input{height: 30px;line-height: 30px;
}
.holder{font-size: 13px;
}
.cancelbtn{font-size: 13px;font-weight: bold;line-height: 30px;margin-left: 10px;border:1px solid #cccccc;width:50px;text-align: center;background-color: #E8E8ED;border-radius: 3px;
}
.hr{border:1px solid #cccccc;opacity: 0.2;
}
.title{display: flex;flex-direction: row;padding:10px;
}
.left{width: 80%;font-size: 15px;
}
.catagorySearchleft{padding-top: 140px;
padding-left: 10px;width: 100%;font-size: 15px;
}.right{width:20%;font-size: 13px;color: #E4393C;text-align: right;
}
.tips{padding:10px;
}
.tip{background-color: #E8E8ED;padding-left: 10px;padding-right: 10px;height: 25px;line-height: 25px;border-radius: 3px;text-align: center;font-size: 13px;margin-right: 10px;float: left;margin-bottom: 10px;
}
.item{clear: both;width: 100%;padding-left: 10px;padding-right: 10px;font-size: 15px;padding-top: 10px;
}
.name{margin-bottom: 10px;
}.content{font-family: "Microsoft YaHei";
}
.type{display: flex;flex-direction: row;width:96%;margin: 0 auto;
}
.type view{margin: 0 auto;
}
.select{font-size: 12px;width: 48%;color: red;text-align: center;height: 45px;line-height: 45px;border-bottom: 5rpx solid red;
}
.default{width:48%;font-size: 12px;text-align: center;height: 45px;line-height: 45px;
}
.movie{display: flex;flex-direction: row;width: 100%;
}
.pic image{width: 80px;height: 100px;padding: 10px;
}
.base-info{width: 100%;font-size: 12px;padding-top:10px;line-height: 20px;
}
.name{font-size: 16px;font-weight: bold;color: #000000;
}.desc{color: #333333;
}
.hr{height: 1px;width: 100%;background-color: #cccccc;opacity: 0.2;
}
.btn{position: absolute;right: 10px;margin-top:50px;
}
.btn button{width: 52px;height: 25px;font-size: 11px;color: red;border: 1px solid red;background-color: #ffffff;
}
.items{display: flex;flex-direction: row;
}
.item{margin-right: 5px;text-align: center;
}
.movieName{font-size: 12px;text-align: center;
}
.movieDesc{font-size: 12px;color: #cccccc;
}
.title{padding:10px;display: flex;flex-direction: row;
}
.intro{width: 60%;
}
.zhinan{font-size: 16px;
}
.third{font-size: 13px;color: #cccccc;margin-top:10px;
}
.month{width:40%;display: flex;flex-direction: row;align-items: center;font-size: 11px;
}
.first{width:40px;height: 20px;line-height: 20px;text-align: center;border-radius: 10px;background-color: #FE4E62;color: #ffffff;margin-right: 10px;
}
.second{width: 40px;height: 20px;line-height: 20px;text-align: center;color: #cccccc;margin-right: 10px;
}
.hr2{height: 10px;width: 100%;background-color: #cccccc;opacity: 0.2;
}

js

Page({data:{result: [],movies:[],name: '',ids:[1,2,3]},// 失去焦点时触发，进行搜索searchGoods:function(e){// 获得输入框的值var name = e.detail.value;var page = this;
// 请求后端数据wx.request({// 请求的url// url: 'http://127.0.0.1:8181/sysMovie/find?movieName=',url:'http://127.0.0.1:8181/sysMovie/find?movieName='+name,method:'GET',header:{"Content-Type":"json"},success:function(res){var movieList = res.dataconsole.log(movieList);var len = movieList.total;console.log(len);if(len<1){wx.showToast({title: '查找失败',icon: 'error',duration: 1000});}var movies = new Array();for(var i=0;i<len;i++){var subject = movieList.data[i];var movie = new Object();//电影名称movie.id = subject.movieId;movie.name = subject.movieName;movie.movieArea=subject.movieArea;movie.movieLength = subject.movieLength;movie.releaseDate = subject.releaseDate;// 海报信息,["/images/movie/2022/06/01/1.jpg"]解析为/images/movie/2022/1.jpgmovie.moviePoster = JSON.parse(subject.moviePoster)[0];//类型之间加/，分隔符movie.movieCategoryName = (subject.movieCategoryList)[0];    console.log(movie)//// console.log(movie)movies.push(movie);}page.setData({movies:movies});}})},// 重置数据resetSearch:function(){var result = new Array();var movies = new Array();this.setData({result:result,name:'',movies:movies});// 返回上一步wx.navigateBack({delta: 1})},// 加载具体电影（跳转到具体的）loadMovieDetail:function(e){console.log(e);var id = e.currentTarget.id;console.log(id)wx.navigateTo({//  进行页面的跳转url: '../movieDetail/movieDetail?id='+id})},// 加载类别电影的类别loadClickCatagoryMovieDetail(e){// http://127.0.0.1:8181/sysMovie/find?movieCategoryId=1&orderByColumn=releaseDate&pageSize=30&pageNum=1&isAsc=desc// 获得输入框的值var CategoryId = e.currentTarget.id;//  var movieCategoryId = "1";//  console.log("CategoryId",CategoryId)console.log(e)var page = this;// 请求后端数据wx.request({// 请求的url// url: 'http://127.0.0.1:8181/sysMovie/find?movieName=',url:'http://127.0.0.1:8181/sysMovie/find?orderByColumn=releaseDate&pageSize=30&pageNum=1&isAsc=desc&movieCategoryId='+CategoryId,method:'GET',header:{"Content-Type":"json"},success:function(res){var movieList = res.dataconsole.log(movieList);var len = movieList.total;console.log(len);if(len<1){wx.showToast({title: '查找失败',icon: 'error',duration: 1000});}var movies = new Array();for(var i=0;i<len;i++){var subject = movieList.data[i];var movie = new Object();//电影名称movie.id = subject.movieId;movie.name = subject.movieName;movie.movieArea=subject.movieArea;movie.movieLength = subject.movieLength;movie.releaseDate = subject.releaseDate;// 海报信息,["/images/movie/2022/06/01/1.jpg"]解析为/images/movie/2022/1.jpgmovie.moviePoster = JSON.parse(subject.moviePoster)[0];//类型之间加/，分隔符movie.movieCategoryName = (subject.movieCategoryList)[0];    console.log(movie)//// console.log(movie)movies.push(movie);}page.setData({movies:movies});}})}
})

wechat微信小程序panda搜索电影（关键字模糊搜索、关键字、类别）相关推荐

wechat微信小程序panda电影详情(播放电影,电影信息,发送弹幕,收藏电影)
运行效果下面是整体界面: 弹幕展示: 收藏: wxml 这里使用的后端地址,进行拼接 <view class="content"><view class=&qu ...
wechat微信小程序panda我的界面(收藏电影、观看电影记录)
运行结果电影历史记录每当用户浏览电影,会把这个电影信息存入数据缓存.在我的界面点击"看过的电影"进入该界面.在页面加载时,从缓存里面读取movieHistory的数据,并储存在 ...
wechat微信小程序panda展示公司信息
运行效果 wxml <view class="page-body"><view class="operate"><view cla ...
wechat微信小程序panda我的界面(登录、我的基本信息的修改和保存)
运行截图登录登录功能是通过向后端发起POST数据请求,将表单username和password提交到服务器端,在服务器端对账号密码进行验证,如果无误,创建一个token(有效时长为1小时),在响应 ...
微信小程序的搜索和重置功能
微信小程序的搜索和重置功能 wxml <template><div><div class="input-wrap"><el-inputse ...
基于微信小程序的网上电影购票的设计与实现
源码获取:https://www.bilibili.com/video/BV1ie411G7Ze/ 基于微信小程序的网上电影购票的设计与实现需求分析是软件设计的一个重要的环节.先确定本系统所服务的用 ...
微信小程序自定义搜索框（searchbar）
微信小程序自定义搜索框(searchbar) 样式截图展示: 功能描述:微信小程序页面需要加入搜索框时,可以直接引用到页面中使用,当用户未输入任何关键字时如第一张图所示,当用户输入要搜索的关键字时如第 ...
微信小程序页面搜索框查询（无后台接口情况下）
微信小程序页面搜索框查询(无后台接口情况下) 效果图: wxml <view class="container"><view class="goodsl ...
微信小程序访问豆瓣电影api400错误解决方法
微信小程序访问豆瓣电影api400错误解决方法参考文章: (1)微信小程序访问豆瓣电影api400错误解决方法 (2)https://www.cnblogs.com/bubbleStar/p/610 ...

wechat微信小程序panda搜索电影（关键字模糊搜索、关键字、类别）

运行结果

wxml

wxss

js

wechat微信小程序panda搜索电影（关键字模糊搜索、关键字、类别）相关推荐

最新文章

热门文章