uni-app 组件

1.页面跳转

<navigator url="/pages/cart/cart2" open-type="navigate">
购物车
</navigator>

<navigator open-type="navigateBack" ></navigator>

<navigator url="/pages/cart/cart2" open-type="switchTab">
购物车
</navigator>

2.showToast

uni.showToast({ icon: 'none', title: '出现错误' })

uni.showToast({ icon: 'success', title: '更新成功' })

uni.showToast({ icon: 'error', title: '出现错误' })

3.showModal

uni.showModal({
    content: '是否退出登录？',
    success: (res) => {
      if (res.confirm) {
        // 确认
      }
    }
  })

4.showLoading & hideLoading

uni.showLoading({
  title: '正在拉起支付',
  mask: true,
})
setTimeout(() => {
  uni.hideLoading()
}, 1000)

6.setClipboardData

将数据粘贴到粘贴板，常用于复制订单号等。

uni.setClipboardData({
  data: '123456789',
  success: function (e) {
    uni.showToast({
      icon: 'success',
      title: '复制成功',
      duration: 2000,
    })
  },
})

7.picker

const onBirthdayChange: UniHelper.DatePickerOnChange = (ev) => {
  profile.value.birthday = ev.detail.value
}

let fullLocationCode: [string, string, string] = ['', '', '']
const onFullLocationChange: UniHelper.RegionPickerOnChange = (ev) => {
  profile.value.fullLocation = ev.detail.value.join(' ')
  fullLocationCode = ev.detail.code!
}

<picker
  @change="onBirthdayChange"
  class="picker"
  mode="date"
  start="1900-01-01"
  :end="new Date()"
  :value="profile?.birthday"
>
  <view v-if="profile?.birthday">{{ profile?.birthday }}</view>
  <view class="placeholder" v-else>请选择日期</view>
</picker>

<picker @change="onFullLocationChange" class="picker" mode="region" :value="['广东省', '广州市', '天河区']">
  <view v-if="false">广东省广州市天河区</view>
  <view class="placeholder" v-else>请选择城市</view>
</picker>

8.swiper

https://uniapp.dcloud.net.cn/component/swiper.html

一般用于左右滑动或上下滑动，比如banner轮播图。注意滑动切换和滚动的区别，滑动切换是一屏一屏的切换。swiper下的每个swiper-item是一个滑动切换区域，不能停留在2个滑动区域之间。

<template>
	<swiper class="banner" indicator-dots circular :autoplay="true" :interval="3000">
		<swiper-item v-for="item in pictures" :key="item.id">
			<image @tap="onPreviewImage(item.url)" :src="item.url"></image>
		</swiper-item>
	</swiper>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				pictures: [
					{id: '1', url: "https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/goods_preview_1.jpg"},
					{id: '2', url: "https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/goods_preview_2.jpg"},
					{id: '3', url: "https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/goods_preview_3.jpg"},
				]
			}
		},
		methods: {
			onPreviewImage(url) {
				// wx可以huancheng uni
				wx.previewImage({
					urls: this.pictures.map(v => v.url), 
					current: url,
				})
			}
		}
	}
</script>

<style>
	.banner,
	.banner image{
		width: 100%;
		height: 150px;
	}
</style>

9.弹出层 uni-popup

子组件调用父组件

子组件（Child.vue）：子组件定义一个事件（事件名和参数）

<script setup lang="ts">
  const emit = defineEmits<{
    (e: 'customevetname', message: string): void
  }>()

  const emitToParent = () => {
  	// 调用父组件绑定的方法
    emit('customevetname', message: string)
  }
</script>

<template>
  <button @click="emitToParent">触发父组件方法</button>
</template>

父组件（Parent.vue）：父组件绑定事件。

<template>
  <Child @customevetname='handleChildCall'/>
</template>

<script setup lang="ts">
  import Child from './Child.vue'
  const handleChildCall = (message: string) => {
    console.log('收到子组件消息:', message)
  }
</script>  
  

示例

<script>
// 定义一个ref, 名字和ref值保持一致，之所以定义类型是为了在ts中更加安全的提示而已
const popup = ref<{
  open: (type?: UniHelper.UniPopupType) => void
  close: () => void
}>()
</script>
<template>
	<button @tap="popup?.open()">打开</button>
    <uni-popup ref="popup" type="bottom" background-color="#fff">
      <view>弹出内容1</view>
      <view>弹出内容2</view>
      <button @tap="popup?.close()">关闭</button>
    </uni-popup>
</template>

<script setup lang="ts">
const popupName = ref<'address' | 'service'>()
const popup = ref<{
  open: (type?: UniHelper.UniPopupType) => void
  close: () => void
}>()
const openPopup = (name: typeof popupName.value) => {
  popupName.value = name
  popup.value?.open()
}
</script>

<template>
   <view @tap="openPopup('address')" class="item arrow">
     <text class="label">送至</text>
       <text class="text ellipsis"> 请选择收获地址 </text>
     </view>
     <view @tap="openPopup('service')" class="item arrow">
       <text class="label">服务</text>
       <text class="text ellipsis"> 无忧退 快速退款 免费包邮 </text>
   </view>

	<!-- uni-ui弹出层 popup?.close()-->
     <uni-popup ref="popup" type="bottom" background-color="#fff">
       <AddressPanel v-if="popupName === 'address'" @close="popup?.close()" />
       <ServicePanel v-if="popupName === 'service'" @close="popup?.close()" />
     </uni-popup>
</template>

ServicePanel.vue
defineEmits定义子调用父

<script setup lang="ts">
// 子调父
const emit = defineEmits<{
  (event: 'close'): void
}>()
</script>

<template>
  <view class="service-panel">
    <!-- 关闭按钮 emit('close') -->
    <text @tap="emit('close')" class="close icon-close"></text>
    <!-- 标题 -->
    <view class="title">服务说明</view>
    <!-- 内容 -->
    <view class="content">
      xxx
    </view>
  </view>
</template>

<style lang="scss">
.service-panel {
  padding: 0 30rpx;
  border-radius: 10rpx 10rpx 0 0;
  position: relative;
  background-color: #fff;
}

.title {
  line-height: 1;
  padding: 40rpx 0;
  text-align: center;
  font-size: 32rpx;
  font-weight: normal;
  border-bottom: 1rpx solid #ddd;
  color: #444;
}

.close {
  position: absolute;
  right: 24rpx;
  top: 24rpx;
}

.content {
  padding: 20rpx 20rpx 100rpx 20rpx;

  .item {
    margin-top: 20rpx;
  }

  .dt {
    margin-bottom: 10rpx;
    font-size: 28rpx;
    color: #333;
    font-weight: 500;
    position: relative;

    &::before {
      content: '';
      width: 10rpx;
      height: 10rpx;
      border-radius: 50%;
      background-color: #eaeaea;
      transform: translateY(-50%);
      position: absolute;
      top: 50%;
      left: -20rpx;
    }
  }

  .dd {
    line-height: 1.6;
    font-size: 26rpx;
    color: #999;
  }
}
</style>

10.scroll-view

滚动视图使用很多，例如下划加载更多，横向Tab、左侧导航等。

<script setup lang="ts">
const isLoading = ref(false)
// 页面加载生命周期
onLoad(async () => {
  isLoading.value = true
  // 轮播图
  // 热门推荐
  await Promise.all([getHomeBannerData(), getHomeHotData()])
  isLoading.value = false
})

// 滚动触底
const guessRef = ref<XtxGuessInstance>()
const onScrolltolower = () => {
  console.log('滚动触底')
  // 调用子组件内部方法
  guessRef.value?.getMore()
}

// 下拉刷新
const isTriggered = ref(false)
const onRefresherrefresh = async () => {
  // 开启动画
  isTriggered.value = true
  // 重置猜你喜欢的多个数据进行初始化
  guessRef.value?.resetData()
  // 将多个promise请求异步同时请求，等所有请求结束后再往下执行
  await Promise.all([getHomeBannerData(), getHomeHotData(), guessRef.value?.getMore()])
  // 关闭动画
  isTriggered.value = false
}
</script>

<template>
	<scroll-view
	    refresher-enabled
	    @refresherrefresh="onRefresherrefresh"
	    :refresher-triggered="isTriggered"
	    @scrolltolower="onScrolltolower"
	    scroll-y
	    class="scroll-view"
	  >
	    <PageSkeleton v-if="isLoading" />
	    <template v-else>
	      <XtxSwiper :list="bannerList" />
	      <CategoryPanel />
	      <HotPanel :list="hotList" />
	      <XtxGuess ref="guessRef" />
	    </template>
	  </scroll-view>
</template>