微信小程序模仿豆瓣评分使用网络请求数据页面交互传值

首页效果图

 

详情页效果图

 

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
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值