当前位置:   article > 正文

必看!uni-app开发项目实战教程(12条常遇到知识点)_un-app扩展组件uni-search-bar怎么据图使用

un-app扩展组件uni-search-bar怎么据图使用

(1)创建项目:选uni-ui项目

在HBuilderX新建uni-app项目的模板中,选择uni ui模板 由于uni-app独特的easycom技术,可以免引用、注册,直接使用各种符合规则的vue组件。

在代码区键入u,拉出各种内置或uni ui的组件列表,选择其中一个,即可使用该组件。

光标放在组件名称上,按F1,可以查阅组件的文档。

uni ui代码块

 (2)引入组件

首先先将扩展组件(uni-ui)插件进行引入

uni-ui的插件库下载

进行引入

(3)使用组件

例如:

制作一个消息列表

就可以使用uni-list的插件

直接输入"u li"就有相对应的组件名

<uni-list></uni-list>

然后里面的制作,就可以按照uni-list的参数进行设置

uni-list的参数大全

代码示例:

  1. <template>
  2. <view>
  3. <uni-nav-bar right-icon="personadd" title="我的好友" class="navbar"></uni-nav-bar>
  4. <uni-search-bar placeholder="搜索好友" @confirm="search" @cancel="cancel" cancel-text="取消" radius="35" >
  5. <uni-icons slot="searchIcon" color="#999999" size="18" type="search" />
  6. </uni-search-bar>
  7. <view v-for="(item,index) in artivelist" :key="index">
  8. <uni-list >
  9. <uni-list-item
  10. thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"
  11. thumbSize="lg" :title="item.title" :note="item.note" showArrow="true" >
  12. </uni-list-item>
  13. </uni-list>
  14. </view>
  15. </view>
  16. </template>
  17. <script>
  18. export default {
  19. data() {
  20. return {
  21. artivelist: [{
  22. title: '参与参与',
  23. note: '参与的签名',
  24. img: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png'
  25. },
  26. {
  27. title: '鼓捣鼓捣',
  28. note: '湖人与如图',
  29. img: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png'
  30. },
  31. {
  32. title: '有人同意',
  33. note: '计划体育局',
  34. img: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png'
  35. },
  36. {
  37. title: '哈哈哈哈',
  38. note: '给对方好好',
  39. img: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png'
  40. }
  41. ]
  42. }
  43. },
  44. methods: {
  45. search() {},
  46. cancel() {}
  47. },
  48. }
  49. </script>
  50. <style>
  51. .navbar {
  52. opacity: 1;
  53. font-size: 30rpx;
  54. font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  55. font-weight: bold;
  56. text-align: center;
  57. color: #25AFA2;
  58. }
  59. </style>

 (4)扩展组件的样式修改

有两种方法:

第一种:(命名法)

只有一层(就是里面的板块样式是可以一致的),就可以使用直接命名法

然后如果一些情况下,不起效的话,就在css加 !important

例如下面这个,就只是设置大盒子的高度,就可以使用第一种方法

  1. <uni-list class="news-content" v-for="(item,index) in list" :key="index">
  2. <uni-list-chat :avatar-circle="true" :title="item.title"
  3. :avatar="item.src"
  4. :note="item.note" :time="item.time" :badgeText="item.num"></uni-list-chat>
  5. </uni-list>
  6. <style>
  7. .news-content {
  8. height: 160rpx;
  9. }
  10. </style>

第二种:(源码修改法)

组件里面需要修改的内容比较多,那这个时候,我们可以直接修改这个扩展组件的源码,

在这个输入这个组件的名字

然后进入这个组件里,再ctrl+f,输入你想修改的那个组件参数名,再进行修改css样式

 (5)使用导航栏扩展组件

使用导航栏组件时,需要注意的两个点

第一个是:需要用一个大的view进行包裹

第二个是:需要在page.josn里面,在你加入导航栏组件的那个页面里

加入"navigationStyle":"custom"

 (6)如何使用uni-icon组件

type就是icon名

 

然后就是多看每个组件的参数设置就可以了

如何修改组件:uni-list-item 里面的thmb的方形图片为圆形

也是找到组件的源码,然后进行修改就可以

 

(7) 如何修改扩展组件的图片?

只需要绑定组件参数,再加"require('相对路径')"

示例:

:thumb="require('相对路径')"

  1. <uni-list>
  2. <uni-list-item :thumb="require('static/friend/friend1.jpg')" thumbSize="lg" :title="item.title" :note="item.note" showArrow="true">
  3. </uni-list-item>
  4. </uni-list>

(8)顶部导航栏的使用

使用uview的导航栏

https://www.uviewui.com/components/setting.html

安装地址https://ext.dcloud.net.cn/plugin?id=1593

https://www.uviewui.com/components/navbar.html

(9)如何跳转到不同的页面(从一个页面跳转到不同的页面,可返回原来的页面)?

跳转页面(从一个页面跳转到不同的页面,可返回原来的页面)

这个组件自带返回

详情可以参考:navigator官方文档

2种情况:

情况1(标签法):

在某一个标签里面,直接跳转到其他页面

在标签里面,设置点击事件,再写方法,就可以达到效果了

  1. <view class="user-tip" @click="tohead()">
  2. 跳转到个人中心页面
  3. </view>
  1. methods:{
  2. tohead() {
  3. uni.navigateTo({
  4. url:"/pages/mine/head/head"
  5. })
  6. }
  7. }

情况2(渲染法):

在我们进行排版的时候,如果同一个页面里面的小板块是一样的话,我们会用v-for进行渲染,后期接数据,所以这个时候,就不能直接用标签法,可以使用,渲染跳转地址的方式

首先,在渲染的数组里面,设置好跳转地址的变量(url),然后绑定点击事件 @click="toOtherPage(item.url)",最后把/把跳转地址的变量值,传入方法里面,
                让传入的值与我们写的跳转变量地址相一致,就可以达到跳转的效果了

  1. <!-- 我的相册、赞、收藏、钱包、草稿箱版块 -->
  2. <view class="user-item">
  3. <view class="user-item-main-content" v-for="(item,index) in userlist"
  4. @click="toOtherPage(item.url)" > //绑定点击事件,拿到跳转地址的值,
  5. <view class="user-item-icon">
  6. <image :src="item.src" mode=""></image>
  7. </view>
  8. <view class="user-item-title">{{item.title}}</view>
  9. </view>
  10. </view>
  11. <script>
  12. const app = getApp().globalData;
  13. export default {
  14. data() {
  15. return {
  16. userlist: [{
  17. src: '/static/mine/album.png',
  18. title: '我的相册',
  19. url:'/pages/mine/album/album' //设置跳转地址变量(url)
  20. },
  21. {
  22. src: '/static/mine/like.png',
  23. title: '赞/收藏',
  24. url:'/pages/mine/like/like'
  25. },
  26. {
  27. src: '/static/mine/wallet.png',
  28. title: '我的钱包',
  29. url:'/pages/mine/wallet/wallet'
  30. },
  31. {
  32. src: '/static/mine/drafts.png',
  33. title: '草稿箱',
  34. url:'/pages/mine/drafts/drafts'
  35. },
  36. ]
  37. }
  38. },
  39. onLoad() {
  40. // this.getData()
  41. },
  42. methods:{
  43. toOtherPage(url){
  44. uni.navigateTo({
  45. url:url
  46. //把跳转地址的变量值,传入方法里面,
  47. 让传入的值与我们写的跳转变量地址相一致,就可以达到跳转的效果了
  48. })
  49. }
  50. }
  51. }
  52. </script>

(10)如何设置底部栏跳转到指定页面?

首先在目录,pages这个文件夹里面,

右键(选新建页面)新建底部栏(不超过5个)的跳转页面

 

然后在page.json里面

  1. "tabBar": {
  2. "color": "#7A7E83", //文字的颜色
  3. "selectedColor": "#25AFA2", //点击图标以后,文字的颜色
  4. "borderStyle": "black",
  5. "backgroundColor": "#ffffff",
  6. "height": "50px",
  7. "fontSize": "10px",
  8. "iconWidth": "24px",
  9. "spacing": "3px",
  10. "list": [{
  11. "pagePath": "pages/index/index", //跳转的页面
  12. "iconPath": "static/tabBar/index.png", //页面图标
  13. "selectedIconPath": "static/tabBar/index.png", //点击时的页面图标
  14. "text": "首页" //底部栏的文字
  15. },
  16. {
  17. "pagePath": "pages/friend/friend",
  18. "iconPath": "static/tabBar/friend.png",
  19. "selectedIconPath": "static/tabBar/friedgHL.png",
  20. "text": "好友"
  21. },
  22. {
  23. "pagePath": "pages/news/news",
  24. "iconPath": "static/tabBar/info.png",
  25. "selectedIconPath": "static/tabBar/infoHL.png",
  26. "text": "消息"
  27. },
  28. {
  29. "pagePath": "pages/mine/mine",
  30. "iconPath": "static/tabBar/mine.png",
  31. "selectedIconPath": "static/tabBar/mineHL.png",
  32. "text": "我的"
  33. }
  34. ]
  35. }

 (11)布局

11-1需求:盒子在页面里面,左右有边距,且居中显示

  1. head {
  2. width: 700rpx; //页面的默认宽度是750rpx
  3. height: 100rpx;
  4. margin: 25rpx auto; //这样写,就是左右对齐,上面有25rpxd 边距
  5. }

11-2 :弹性(flex)布局

如何让弹性布局里面的最后一个盒子,靠右显示?

只需要一行代码,

如果是最后一个子盒子是有写出来的,就只需要在子盒子里面,加上

margin-left:auto 

如果是渲染类型的(就是最后一个盒子没有写出来的),就需要在父盒子处

.父盒子类名:last-child { margin-left:auto }

代码示例:

  1. <!-- 修改登录密码至退出账号板块 -->
  2. <view class="user-admin" v-for="(item,index) in adminlist" >
  3. <view class="user-admin-icon">
  4. <image :src="item.src" mode=""></image>
  5. </view>
  6. <view class="user-admin-title">{{item.title}}</view>
  7. <u-icon name="arrow-right" color="#25afa2"
  8. class="user-admin-right-icon" >
  9. </u-icon>
  10. </view>
  11. <script>
  12. const app = getApp().globalData;
  13. export default {
  14. data() {
  15. return {
  16. adminlist: [
  17. {src: '/static/mine/drafts.png',title: '修改登录密码'},
  18. {src: '/static/mine/v.png',title: 'V标认证'},
  19. {src: '/static/mine/service.png',title: '客服中心'},
  20. {src: '/static/mine/feedback.png',title: '问题反馈'},
  21. {src: '/static/mine/out.png',title: '退出账号'},
  22. ]
  23. };
  24. },
  25. onLoad() {
  26. // this.getData()
  27. },
  28. }
  29. </script>
  30. .user-admin {//这个是父盒子,加上弹性布局
  31. display: flex;
  32. flex-wrap: nowrap; //这个是换行
  33. margin: 0 auto;
  34. width: 680rpx;
  35. margin-bottom: 60rpx;
  36. }
  37. .user-admin-icon {
  38. width: 40rpx;
  39. height: 40rpx;
  40. margin-right: 20rpx;
  41. }
  42. .user-admin-icon image {
  43. width: 40rpx;
  44. height: 40rpx;
  45. }
  46. .user-admin .user-admin-title {
  47. width: 180rpx;
  48. margin-left: 20rpx;
  49. font-size: 30rpx;
  50. font-family: PingFang SC, PingFang SC-Bold;
  51. font-weight: 700;
  52. text-align: left;
  53. color: #111111;
  54. }
  55. .user-admin-right-icon {
  56. margin-left: auto; //这个就是父盒子里面的最后一个子盒子,只要加上margin-left: auto;就
  57. 可以达到靠右显示
  58. }

效果图

(12)scoped 页面样式显示

在每一个页面,都需要加scoped(就是下面写的样式,只在该页面起效果),

 然后再看看你是使用less还是sass进行加入

<style scoped lang="scss"></style>

(13)如何设置类型于微博的封面背景图?

  1. <!-- 页面顶部导航栏 -->
  2. <view>
  3. <u-navbar back-icon-name="nav-back" back-icon-color="#FFFFFF" back-text="返回" :background="background"
  4. class="navbar" :immersive="false" :border-bottom="false">
  5. <view class="slot-wrap">
  6. <uni-icons type="search" class="headicon" size="20" color="#ffffff"></uni-icons>
  7. </view>
  8. </u-navbar>
  9. </view>
  10. <image class="nav-background" src="/static/mine/head/headbanner.png" mode="widthFix" ></image>
  11. <style scoped lang="scss">
  12. .navbar {
  13. opacity: 1;
  14. font-size: 30px;
  15. font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  16. font-weight: bold;
  17. text-align: left;
  18. color: #ffffff;
  19. }
  20. .slot-wrap {
  21. display: flex;
  22. padding: 0 30rpx;
  23. margin-left: auto;
  24. /* 如果您想让slot内容占满整个导航栏的宽度 */
  25. /* flex: 1; */
  26. /* 如果您想让slot内容与导航栏左右有空隙 */
  27. /* padding: 0 30rpx; */
  28. }
  29. .nav-background {
  30. position: fixed;
  31. left: 0;
  32. top: 0;
  33. width: 100%;
  34. }
  35. </style>

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/2023面试高手/article/detail/316725
推荐阅读
  

闽ICP备14008679号