首页效果图
详情页效果图
componment组件:
Taps.wxml
<view class="searchbar">
<navigator wx:if="{
{isnavigator}}" url='/pages/search/search' class='search-navigator'></navigator>
<view wx:else class="search-input-group">
<input class='search-input' placeholder='搜索' bindinput='onInputEvent'></input>
</view>
</view>
Taps.wxss
.searchbar{
background:#41be57;
padding: 20rpx 20rpx;
}
.search-navigator{
width: 100%;
height: 60rpx;
background-color: #fff;
border-radius: 6rpx;
background-image: url("data:image/png;base64,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");
background-size:8%;
background-repeat:no-repeat;
background-position: center;
}
.search-input-group{
width: 100%;
height: 60rpx;
background-color: #fff;
padding: 6rpx 20rpx;
box-sizing: border-box;
}
.search-input{
height: 40rpx;
font-size: 12px;
}
.xiangshang{
margin-top: -10rpx;
}
.star{
height: 60rpx;
width: 60rpx;
display: inline-block;
}
.stars-group{
text-align: center;
font-size: 60rpx;
}
Taps.json
{
"component": true,
"usingComponents": {}
}
Taps.js
Component({
/**
* 组件的属性列表
*/
properties: {
isnavigator:{
type:Boolean,
value:false
}
},
/**
* 组件的初始数据
*/
data: {
rate:4,
light:'',
gray:'',
half:'',
ratenum:''
},
/**
* 组件的方法列表
*/
methods: {
onInputEvent: function(event){
var value = event.detail.value;
var detail = {"value": value};
var options = {};
this.triggerEvent("searchinput",detail,options);
}
}
})
评分星星组件
stars.wxml
<!--component/stars/stars.wxml-->
<view class="rate-group">
<image wx:for='{
{lights}}'src="/images/rate_light.p