微信小程序图片圆形显示并作为按钮

版权声明： https://blog.csdn.net/weixin_41716049/article/details/84100472

小程序地图导航，天气显示源码  https://github.com/zzwwjjdj319/miniProgramAmap

微小信猜拳程序游戏小源码https://gitee.com/sccqcd/wechat_applet_weather_map

微信小程序机票查询源码：https：//gitee.com/sccqcd/ticket_inquiries

祖最近在做小程序的时候准备做个菜单栏的，，然后为了美化自己找了图片准备做成按钮，先看效果图吧，直接上代码了，每个人的情况都不一样我把我的样式贴出来希望对大家有帮助

​​

扫描二维码关注公众号，回复： 4298612 查看本文章

wxml

​​​​​​​​
 <view class="banner">
    <swiper class="swiper_box" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" vertical="{{false}}" duration="{{duration}}" circular='true'>
      <block wx:for="{{imgUrls}}" wx:key="{{imgUrls}}">

        <swiper-item>
          <image src="{{item}}"  mode="aspectFit" />
        </swiper-item>
      </block>
    </swiper>
  </view>



<view class='adduserorder'>


 <button catchtap="handleClicks"  class="circle">
 <image mode='scaleToFill' src=/videos_dev/CQCD/resources/9511.png' plain='true' class='image'></image>
 </button>
 
 <button type="handleClicks" catchtap="handleClicks" class="circle">
 <image mode='aspectFill' src='/videos_dev/CQCD/resources/9512.png' plain='true' class='image'></image>
 </button>


 <button type="handleClicks" catchtap="handleClicks" class="circle">
 <image mode='aspectFill' src='videos_dev/CQCD/resources/9513.png' plain='true' class='image'></image>
 </button>
 
 <button type="handleClicks" catchtap="handleClicks" class="circle">
 <image mode='aspectFill' src='/videos_dev/CQCD/resources/9514.png' plain='true' class='image'></image>
 </button>

 <button  catchtap="videoApp" mode="widthFix" class="circle">
 <image mode='aspectFill' src='/videos_dev/CQCD/resources/9515.png' plain='true' class='image'></image>
 </button>
</view>

<view class='textls'>
<view class='viewclass'>
    <text class='viewview'>火车票</text>
</view>
<view class='viewclass'>
    <text class='viewview'>机票</text>
</view>
<view class='viewclass'>
    <text class='viewview'>酒店</text>
</view>
<view class='viewclass'>
    <text class='viewview'>景区</text>
</view>
<view class='viewclass'>
    <text class='viewview'>小视频</text>
</view>
</view>
<view class='viewclass'>
 <button  catchtap="LisGomora" mode="widthFix" class="circle">
 <image mode='aspectFill' src='../../images/images/extension/train-extension1.png' plain='true' class='image'></image>
 </button>
</view>
 <view class='viewclass'>
    <text class='viewview'>小游戏</text>
</view>

wxss

.swiper-item{
  width: 100%;
  display: block;
  height: 150px;
}
.swiper_box {
  
    width: 100%;
}
swiper-item image {
    height: 100%;
    width: 100%;
    display: inline-block;
    overflow: hidden;
}.circle{
 
    width: 70px;
    height: 70px;
    border: 0 solid #ffffff;
    border-radius: 250px; 
   font-size:0;
}
.image{
  top: 20rpx;
  margin-left: -22rpx;
  
   display: flex;
   width: 135rpx;
    height: 135rpx;
}


.btn3 {
 width: 30%;
  margin-top: 20rpx;
  background-color: rgba(57, 163, 233, 0.767);
  color: white;
  border-radius: 40rpx;
}
.adduserorder{
 margin-top: 50rpx;
display: flex;
flex-direction:row;
justify-content:flex-end;
}.viewclass{
  
  width: 165rpx;
  display: flex;
  flex-direction: row;
  justify-content: center;
}.textls{
  display: flex;
  flex-direction:row;
  
}

js

var app = getApp()
Page({
  data: {
   
   
    //这是轮播图图片
    imgUrls: [
      '../../images/images/top/coach.jpg',
      '../../images/images/top/personnel.jpg',
      '../../images/images/top/plane.jpg',
      '../../images/images/top/totoro.jpg',
      '../../images/images/top/totoro2.jpg',
      '../../images/images/top/totoro3.jpg',
      '../../images/images/top/train.jpg'
    ],
     indicatorDots: true, //是否显示面板指示点
    autoplay: true, //是否自动切换
    interval: 3000, //自动切换时间间隔,3s
    duration: 1000, //  滑动动画时长1s
  },
})