Uniapp随笔集

uniapp标题栏（ page.json ）设置页面标题栏公共设置防止手机端上下拖动标题栏下划线左上角返回按钮标题栏按钮页面内容（index.vue）设置标题栏点击按钮触发动态设置页面标题(title)分割线轮播图多个view处于同一行

uniapp

标题栏（ page.json ）设置

页面标题栏公共设置

"path": "路径地址",
            "style": {
                // 是否配置下拉刷新的功能
                "enablePullDownRefresh": true,
                
                // 标题
                "navigationBarTitleText": "标题",
                
                // 背景颜色
                "navigationBarBackgroundColor":"#147bc3",
                
                // 文字颜色
                "navigationBarTextStyle":"white",
                
                
                "app-plus": {
                    // 隐藏滚动条
                    "scrollIndicator": "none",
                    
                    // 将回弹属性关掉
                    "bounce": "none" 
                },
            }

防止手机端上下拖动

"app-plus": {
    "bounce": "none"
}

标题栏下划线

"app-plus": {
 "titleNView": {
     "splitLine": {
       // 分割线颜色
       "color": "#E8ECEF"
     }
 }
}

左上角返回按钮

"titleNView": {
"autoBackButton": "true",
}

标题栏按钮

"titleNView": {    
"buttons": [{
  "id": "1",
  "float": "right",
    "fontSize": "15px",
  "fontSrc": "你自己自定义按钮前面放的icon",
  "text": "筛选"
}]
}

页面内容（index.vue）设置

标题栏点击按钮触发

// 点击事件
onNavigationBarButtonTap(val) {
console.log('eee')
},

动态设置页面标题(title)

uni.setNavigationBarTitle({
title:'设置标题(可以是变量)'
})

分割线

    <view class="divider" />
​
​
/* 分割线 */
    .divider {
        background: #f5f7ef;
        width: 100%;
        height: 1rpx;
        margin-top: 12rpx;
    }

轮播图

circular 用来设置循环轮播

若依手机端：

<uni-swiper-dot class="uni-swiper-dot-box" :info="data" 
                :current="current" field="content">
    
    <swiper class="swiper-box" :current="swiperDotIndex" 
            circular @change="changeSwiper">
        
        <swiper-item v-for="(item, index) in data" :key="index">
            <view class="swiper-item" @click="clickBannerItem(item)">
                <image :src="item.image" mode="aspectFill" :draggable="false" />
            </view>
        </swiper-item>
        
    </swiper>
</uni-swiper-dot>

官方解释:

<template>
    <view class="home">
        <!--circular用来设置循环轮播   indicator-dots设置下面小圆点用来点击 -->
        <swiper circular indicator-dots>
            <!-- v-for循环遍历数组 -->
            <swiper-item v-for="item in swipers" >
                <image :src="item"></image>
            </swiper-item>
        </swiper>
    </view>
</template>
​
<script>
    export default {
        data() {
            return {
                swipers:[
                    'https://img-.png',
                    'https://img-blog.csdnimg7.png',
                    'https://img-blog.csdnimg.cn.png',
                ]
            }
        },
    }
</script>
​
<!-- 开启scss -->
<style lang="scss">
    .home{
        swiper{
            width: 750rpx;
            height: 470rpx;
            image{
                width: 100%;
                height: 100%;
            }
        }
    }
</style>

多个view处于同一行

外面套一层view 并且给其 display:flex 属性

<view style="width: 90%; display:flex">
    <view class="space">
        <view class="space_text">日记空间</view>
        <view class="space_text_min">记录您的每天趣事</view>
        <view class="space_butten">点击进入</view>
    </view>
​
    <view class="community">
        <view class="community_text">社区交流</view>
        <view class="community_text_min">forum Exchange</view>
        <view class="community_butten">点击进入</view>
    </view>
</view>