13.轮播图预览、更换头像

Dear 丶 2023-02-17 11:10 53阅读 0赞

#### 预览 ####

detail.wxml

<swiper>
      <swiper-item wx:for="{ { goodsInfo.slides }}" wx:key="index">
        <image src="{ { 'http://localhost:3000' + item }}" mode="widthFix" bindtap="handlePreview" data-url="{ { 'http://localhost:3000' + item }}" />
      </swiper-item>
    </swiper>

detail.js

// 预览界面
      handlePreview (e) { 
        wx.previewImage({ 
          current: e.currentTarget.dataset.url, // 当前显示图片的http链接
          // 相对路径映射为绝对路径
          urls: this.data.goodsInfo.slides.map(item => 'http://localhost:3000' + item) // 需要预览的图片http链接列表
        })
      }

#### 换头像 ####

center.wxml

<view wx:if="{ { !users }}">
      
      <button open-type="getUserInfo" bindgetuserinfo="handleGetUserInfo">授权</button>
    </view>
    
    <view wx:else>
      
      <view style="text-align: center">
        <image src="{ { users.avatarUrl }}" bindtap="handleChangeImage"></image>
      </view>
      
      <view>{
       { users.nickName }}</view>
      
      <button bindtap="handleLocation">定位</button>
    </view>

center.js

// 定位
      handleLocation () { 
          wx.getLocation({ 
            type: 'gcj02', //返回可以用于wx.openLocation的经纬度
            success (res) { 
              const latitude = res.latitude
              const longitude = res.longitude
              wx.openLocation({ 
                latitude,
                longitude,
                scale: 18
              })
            }
          })
      }

app.json

"permission": { 
        "scope.userLocation": { 
          "desc": "你的位置信息将用于小程序位置接口的效果展示"
        }
      }