微信小程序不赚钱_Vue 幸运大转盘完成思路详解

Vue 幸运大转盘实现思路详解       这篇文章主要介绍了Vue 幸运大转盘实现思路详解,需要的朋友可以参考下

转盘抽奖主要有两种,指针转动和转盘转动,个人觉得转盘转动比较好看点,指针转动看着头晕,转盘转动时指针是在转盘的中间位置,这里要用到css的transform属性和transition属性,这两个因为不常用最好是上网查查,用法和功能。
  在html部分

 div id="wheel_surf" 
 div 幸运大转盘 /div 
 div 
 div 
 div 
 div @click="rotate_handle()" : /div 
 /div 
 div : 
 div 
 div v-for="(item,index) in prize_list" :key="index" 
 div v-if="item.icon" 
 img :src="item.icon" / 
 /div 
 div 
{{item.name}} /div 
 /div 
 /div 
 /div 
 /div 
 /div 
 div v-transfer-dom 
 x-dialog v-model="showHideOnBlur" hide-on-blur 
 div 
 div v-show="val == 7" 
 p 谢谢参与!祝您下次好运 /p 
 /div 
 div v-show="val !== 7" 
 p 恭喜你 /p 
 img :src="imgActive" / 
 p {{item.rewardDesc}} /p // 获奖返回值
 /div 
 /div 
 div @click="showHideOnBlur=false" 
 span /span 
 /div 
 /x-dialog 
 /div 
 /div 

总结

以上所述是小编给大家介绍的Vue 幸运大转盘实现思路详解,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!


相关阅读