小程序抽奖——九宫格

最新推荐文章于 2024-05-15 15:54:11 发布

置顶

爱敲代码的胖纸

最新推荐文章于 2024-05-15 15:54:11 发布

阅读量435

点赞数

分类专栏： js css html 文章标签：前端 html javascript css less

本文链接：https://blog.csdn.net/qq_41164267/article/details/112859012

版权

这篇博客介绍了一个小程序九宫格抽奖的实现过程，提供了WXML、JS和WXSS的代码示例，并展示了最终的截图效果。读者可以在此基础上调整细节，以适应自己的需求。资源可在CSDN下载。

摘要由CSDN通过智能技术生成

小程序得九宫格抽奖，只是个demo，需要得自己改下细节

首先是wxml


<view class="container">
  停止位置:<input value='{
  {luckPosition}}' style="width:100%;text-align:center" bindinput='input' type='number'></input>
  <view class='frame_view'>
    <view class='frame_row'>
    <image class='frame_item' style='opacity:{
  {color[0]}}' src='{
  {images[0]}}'></image>
    <image class='frame_item' style='opacity:{
  {color[1]}}' src='{
  {images[1]}}'></image>
    <image class='frame_item' style='opacity:{
  {color[2]}}' src='{
  {images[2]}}'></image>
    </view>

    <view class='frame_row'>
    <image class='frame_item' style='opacity:{
  {color[7]}}' src='{
  {images[7]}}'></image>
    <image class='frame_item' src='{
  {btnconfirm}}' bindtap='{
  {clickLuck}}'></image>
    <image class='frame_item' style='opacity:{
  {color[3]}}' src='{
  {images[3]}}'></image>
    </view>

    <view class='frame_row'>
    <image class='frame_item' style='opacity:{
  {color[6]}}' src=&#