uni-app引入插件的方法：1、在uni-app的官网上找到需要的插件；2、点击右侧顶部的【使用hx导入】；3、选择要导入到的一个项目中即可。
本文操作环境：windows7系统、uni-app2.5.1版，dell g3电脑
uni-app怎么引入插件？
在uni-app中快速导入自己需要的插件在uni-app的官网上;找到自己需要的插件； 然后点击右侧顶部的【使用hx导入】这一步的前提是你必须要用自己的账好登录；然后选择你要导入哪一个项目 然后就可以了
插件
<template> <!-- 获取一个数组，结构为[{date:'时间',info:'内容内容'}] --> <!-- @click事件返回点击标签元素的索引值 第一项为0 --> <!-- 在uni-app中快速导入自己需要的插件 在uni-app的官网上;找到自己需要的插件； 然后点击右侧顶部的【使用hx导入】这一步的前提是你必须要用自己的账好登录； 然后选择你要导入哪一个项目 然后就可以了 --> <view class="bg"> <view class="steps"> <view class="steps_item" v-for="(i, index) in infolist"> <view class="s_r"> <view class="line" :style="{backgroundcolor:index != 0?backgroundcolor:'rgba(0,0,0,0)'}"></view> <view class="index" :style="{backgroundcolor:backgroundcolor,color:color}"> {{ index + 1 }} </view> <view class="line" :style="{backgroundcolor:index != infolist.length-1?backgroundcolor:'rgba(0,0,0,0)'}"></view> </view> <view class="s_l"> <view class="info_item" @tap="topage(index)"> <text>{{ i.date }}</text> <view :style="{webkitlineclamp:linenum!=0?linenum:''}">{{ i.info }}</view> </view> </view> </view> </view> </view></template><script> export default { name: 'ysteps', props: { infolist: { type: array, default: [] }, color: { type: string, default: '#fff' }, backgroundcolor: { type: string, default: '#ff3838' }, linenum: { type: number, default: 0 } }, data() { return {}; }, onload(e) { //获取列表 }, methods: { topage(e) { this.$emit('click', e); } } };</script><style lang="scss" scoped> page { background-color: #f2f2f2; } .bg { margin: 20upx 0; background-color: #f2f2f2; display: flex; } .steps { display: flex; flex-direction: column; .steps_item { display: flex; .s_r { padding: 0 20rpx; display: flex; flex-direction: column; align-items: center; .line { flex: 1; width: 5rpx; background-color: #fff; } .index { width: 40rpx; height: 40rpx; font-size: 12px; text-align: center; line-height: 40rpx; border-radius: 50rpx; } } .s_l { display: flex; flex-direction: column; padding: 20rpx 0; .info_item { background-color: #ffffff; margin-right: 30upx; border-radius: 10upx; display: flex; flex-direction: column; justify-content: center; padding: 30upx; box-shadow: 0 10rpx 30rpx #ddd; width: 580rpx; text { font-size: 18px; font-weight: 500; color: rgba(51, 51, 51, 1); line-height: 25px; } view { font-size: 14px; font-weight: 400; color: rgba(102, 102, 102, 1); line-height: 20px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; flex-direction: column; } } .info_item:active { background-color: #f4f4f4; } } } } // .steps { // display: flex; // flex-direction: column; // margin: 0 30upx; // .steps_item { // display: flex; // align-items:center ; // background-color: #fff; // margin-top: 10rpx; // .s_r { // display: flex; // flex-direction: column; // align-items: center; // height: 100%; // background-color: #f3f; // flex: 1; // view { // height: 100%; // display: flex; // flex: 1; // height: 100%; // width: 5upx; // } // text { // display: flex; // flex-direction: column; // align-items: center; // width: 40upx; // line-height: 40upx; // height: 40upx; // border-radius: 50%; // background-color: #ff3838; // color: #ffffff; // font-size: 10px; // } // } // } // } // .info_list { // display: flex; // flex-direction: column; // flex: 1; // .info_item { // background-color: #fff; // height: 200upx; // margin: 20upx 0; // margin-right: 30upx; // border-radius: 10upx; // display: flex; // flex-direction: column; // justify-content: center; // padding: 0 30upx; // text { // font-size: 18px; // font-family: pingfangsc-medium, pingfang sc; // font-weight: 500; // color: rgba(51, 51, 51, 1); // line-height: 25px; // } // view { // font-size: 14px; // font-family: pingfangsc-regular, pingfang sc; // font-weight: 400; // color: rgba(102, 102, 102, 1); // line-height: 20px; // overflow: hidden; // text-overflow: ellipsis; // display: -webkit-box; // -webkit-line-clamp: 2; // flex-direction: column; // } // } // .info_item:active { // opacity: 0.6; // } // }</style>
使用【推荐学习：uni-app教程】
<view style="background-color: #f2f2f2;padding-top: 100rpx;"> <ysteps linenum='0' color='#fff' backgroundcolor='#000fff' :infolist='list'></ysteps></view>import ysteps from '../../components/y-steps/y-steps.vue'list: [ { date: '2020-1-4', info: '我一次来到这个这个阅读网站' }, { date: '2020-2-4', info: '我写下了自己的第一篇文章' }, { date: '2020-3-4', info: '我的文章超阅读量过了10w' }, { date: '2020-4-4', info: '我成为写作达人' },],components:{ ysteps}
以上就是uni-app怎么引入插件的详细内容。