wex5 实战 星级评分的输入与输出

      群是万能的，有人问我星级评分的输入问题，我一想，案例里模板里有一个五星评分，是个显示效果。如果点击五星，如何实现输入呢？

      其实很简单。

一   效果演示：

     

    

    点击几颗星，输入星级。

二  设计思路

     延用案例里的五星显示，绑定到data星级字段上，把range 滑动条组件也绑定到星级字段上，放到星星上，设置为全透明即可。

     好像有点太简单了

三  代码与实现

     1 五星调入

        

     2    从新建向导里找到要用的组件，拷出来，案例里是span里有一人i图片，放到一个div里

          

    

     3 星星图片拷出来，放到工程里，一会css文件要引用。

       

     4 把wex5组件labelRange组件放到sapn同级目录，并在源码模式支掉label

  

     5  修改star 和range的class

        

      star样式里修改star图片路径，starbar是range的样式，调节到和五星一样宽度，一样位置，z-index为图层深度，设置到最上层，全透明即可

    6 绑字字段

      

     

 

 

   （注）range的取值范围，我定义是1-10，在星级bind-style样式中，做了百分比拼接处理。

四 总结

    实在是简单，没什么可说的。朋友们费劲去网上找什么五星评分插件，各种不好用，兼容性问题，看看这篇文，是不是得重新认识wex5了？呵呵。

 

相关视频制作完成，上传优酷。教学app制作中。我是邯郸戏曲开发，tel：15175073123,qq:1017945251

 

 

 扫描二维码，看高清教学视频。