小程序圆形图片按钮

比眉伴天荒 2022-08-30 04:15 343阅读 0赞

# 圆形图片实现点击跳转功能 #

制作圆形图片，并可以点击跳转。用数组存入图片和文字，用循环输出，效果如图所示：  
![在这里插入图片描述][20210718224058150.png]

--------------------

# 一、代码 #

index.wxml：

<view class="image">
      <view class="t" wx:for="{ {img}}" wx:key="index">
        <image class="img_circular" src="{ {item.url}}" bindtap="jump" data-id="{ {index}}"></image>
          <view class="text">
            { { item.name}}
          </view>
        </view>
    </view>

index.wxss：

/**圆形图片**/
    .image{ 
      display:flex;
      flex-wrap: wrap;
    }
    .img_circular{ 
      margin-left: 80rpx;
      margin-top: 35rpx;
      height: 120rpx;
      width: 120rpx;
      border-radius:50%;
    }
    .t{ 
      width:230rpx;
      text-align: center
    }
    .text{ 
    margin-left: 35px;
    font-size: 13px;
    }

index.js：

Page({ 
      data:{ 
        img:[
          {  url: '/pages/img/校园.png', name: '校园',id:"0"},
          {  url: '/pages/img/社团.png', name: '社团',id:"1"},
          {  url: '/pages/img/商城 (2).png', name: '商城',id:"2"},
        ]
      },
      /**跳转**/
      jump:function(){ 
        wx.switchTab({ 
          url: '../show/show',
        })
      }          
    })

--------------------

# 总结 #

本文仅仅简单实现圆形图片和点击跳转效果。可以主页进行作为分类然后跳转，如图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0REREhMXw_size_16_color_FFFFFF_t_70]

## 新的改变 ##

最近做了一个展示类的小程序，大家如果感兴趣可以关注一下，我会更新这个小程序所有功能，包括前端。小程序的名字叫淘湖，第一次做小程序，查询了不少例子才完成的，希望大家多多包涵O(∩\_∩)O~。

**文章未经同意不能转载！！！**

[20210718224058150.png]: /images/20220829/76a58fcaf65c49279af32b76557088a1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0REREhMXw_size_16_color_FFFFFF_t_70]: /images/20220829/9d5d6e58bf094e8fba8487a60599ee03.png