微信小程序之开发会议OA项目

空空_k2024-02-19 14:03

目录

前言

本篇目标

首页

会议

投票

个人中心

会议OA项目-首页

配置

tabbar

mock工具

page

swiper

会议信息

会议OA项目-会议

自定义tabs组件

会议管理

会议OA项目-投票

会议OA项目-个人中心

前言

文章含源码资源，投票及个人中心详细自行查看源码即可

  1. 小程序没有DOM对象，一切基于组件化

  2. 储备知识

    1. 理解事件机制

    2. 理解组件化

    3. 理解数据绑定

    4. Flex布局

    5. 移动端适配方案

  3. 建议：学习vue后开发小程序更简单

本篇目标

首页

会议

投票

个人中心

会议OA项目-首页

配置

  • config/api.js

    javascript 复制代码 
    // 以下是业务服务器API地址
 // 本机开发API地址
var WxApiRoot = 'http://localhost:8080/demo/wx/';
// 测试环境部署api地址
// var WxApiRoot = 'http://192.168.0.101:8070/demo/wx/';
// 线上平台api地址
//var WxApiRoot = 'https://www.oa-mini.com/demo/wx/';

module.exports = {
  IndexUrl: WxApiRoot + 'home/index', //首页数据接口
  SwiperImgs: WxApiRoot+'swiperImgs', //轮播图
  MettingInfos: WxApiRoot+'meeting/list', //会议信息
};

tabbar

  • app.json

    java 复制代码 
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "/static/tabBar/coding.png",
      "selectedIconPath": "/static/tabBar/coding-active.png"
    },
      {
        "pagePath": "pages/meeting/list/list",
        "iconPath": "/static/tabBar/sdk.png",
        "selectedIconPath": "/static/tabBar/sdk-active.png",
        "text": "会议"
      },
      {
        "pagePath": "pages/vote/list/list",
        "iconPath": "/static/tabBar/template.png",
        "selectedIconPath": "/static/tabBar/template-active.png",
        "text": "投票"
      },
      {
        "pagePath": "pages/ucenter/index/index",
        "iconPath": "/static/tabBar/component.png",
        "selectedIconPath": "/static/tabBar/component-active.png",
        "text": "个人中心"
      }]

mock工具

  • imageSrcs

    javascript 复制代码 
    {
  "data": {
    "images":[
        {
          "img": "https://tse2-mm.cn.bing.net/th/id/OIP-C.ja-L_FC01Xbzhqo4Rm3B8gHaEo?rs=1&pid=ImgDetMain",
          "text": "1"
        },
        {
          "img": "https://tse2-mm.cn.bing.net/th/id/OIP-C.A3UXYP_OyP3S5UfO6HXuAgHaEK?rs=1&pid=ImgDetMain",
          "text": "2"
        },
        {
          "img": "https://pic3.zhimg.com/v2-9873f715d01819718cdc59dc004052b5_1440w.jpg?source=172ae18b",
          "text": "3"
        },
        {
          "img": "https://ts1.cn.mm.bing.net/th/id/R-C.8bb9ed00b8b77b8de03ca88c2c5b9c70?rik=KsLZ%2fjYfY5ELCg&riu=http%3a%2f%2fwww.kutoo8.com%2fupload%2fimage%2f10539408%2f14.jpg&ehk=HMGT1e0hcjxVw1XAbC7yJpq3qSDWlnwsj%2fRN%2f0Etimk%3d&risl=&pid=ImgRaw&r=0",
          "text": "4"
        },
        {
          "img": "https://img1.pconline.com.cn/piclib/200906/09/batch/1/34797/1244512002916phjm5dpgjl.jpg",
          "text": "5"
        },
        {
          "img": "https://ts1.cn.mm.bing.net/th/id/R-C.d951726778523659c8f2d7fd6ad838fd?rik=kR8VYs9ELLWFKQ&riu=http%3a%2f%2fwww.kutoo8.com%2fupload%2fimage%2f85280274%2f2017032108.jpg&ehk=%2fJInO%2fEPMaYF1q%2fu6vzk2j6hPSkAEyCyc3%2fH1Ib1tM0%3d&risl=&pid=ImgRaw&r=0",
          "text": "6"
        }
    ]
  },
  "statusCode": "200",
  "header": {
    "content-type":"applicaiton/json;charset=utf-8"
  }
}

page

  • index.css

    css 复制代码 
    page{
	height: 100%;
	background-color: #efeff4;
}

swiper

  • index.wxml

    XML 复制代码 
    <swiper indicator-dots="true" autoplay="true" circular="true" indicator-color="#fff" indicator-active-color="blue">
   <block wx:for="{{images}}" wx:key="text">
       <swiper-item>
           <view class="swiper-item">
              <image src="{{item.img}}" mode="scaleToFill"></image>
           </view>
       </swiper-item>
   </block>
</swiper>

  • index.css

    css 复制代码 
    swiper {
  width: 100%;
  height: calc(100vw*9/16);
}
.swiper-item>image {
   width:100%;
}

  • index.js

    javascript 复制代码 
    loadSwiperImgs(){
     //请注意this的指向问题
     let that=this;
     wx.request({
       url: api.SwiperImgs,
       success(rs){
         console.log(rs);
         that.setData({
            images:rs.data.images
         });
       }
    })
}

会议信息

  • mock数据

    javascript 复制代码 
    {
  "data": {
    "lists": [
        {
           "id": "1",
          "image": "/static/persons/Snipaste_2024-02-18_20-39-17.png",
          "title": "微信小程序会议OA_空空",
          "num":"1314",
          "state":"进行中",
          "starttime": "2024-02-18 21:00:00",
          "location": "湖南省------长沙市"
        },
        {
          "id": "1",
          "image": "/static/persons/Snipaste_2024-02-18_20-40-00.png",
          "title": "微信小程序会议OA_空空",
          "num":"520",
          "state":"已结束",
          "starttime": "2024-02-18 12:00:00",
          "location": "湖南省------长沙市"
        },
        {
          "id": "1",
          "image": "/static/persons/Snipaste_2024-02-18_20-40-45.png",
          "title": "微信小程序会议OA_空空",
          "num":"888",
          "state":"进行中",
          "starttime": "2024-02-18 08:00:00",
          "location": "湖南省------长沙市"
        },
        {
          "id": "1",
          "image": "/static/persons/Snipaste_2024-02-18_20-40-45.png",
          "title": "微信小程序会议OA_空空",
          "num":"666",
          "state":"已结束",
          "starttime": "2024-02-18 08:00:00",
          "location": "湖南省------长沙市"
        },
        {
          "id": "1",
          "image": "/static/persons/Snipaste_2024-02-18_20-40-00.png",
          "title": "微信小程序会议OA_空空",
          "num":"999",
          "state":"进行中",
          "starttime": "2024-02-18 08:00:00",
          "location": "湖南省------长沙市"
        }
      ]
  },
  "statusCode": "200",
  "header": {
    "content-type":"applicaiton/json;charset=utf-8"
  }
}

  • index.wxml

    javascript 复制代码 
    <view class="mobi-title">
    <text class="mobi-icon"></text>
    <text>会议信息</text>
</view>
<block wx:for-items="{{lists}}" wx:for-item="item" wx:key="item.id">
    <view class="list" data-id="{{item.id}}">
        <view class="list-img">
            <image class="video-img" mode="scaleToFill" src="{{item.image}}"></image>
        </view>
        <view class="list-detail">
            <view class="list-title"><text>{{item.title}}</text></view>
            <view class="list-tag">
                <view class="state">{{item.state}}</view>
                <view class="join"><text class="list-num">{{item.num}}</text>人报名</view>
            </view>
            <view class="list-info"><text>{{item.address}}</text>|<text>{{item.time}}</text></view>
        </view>
    </view>
</block>
<view class="section bottom-line">
		<text>到底啦</text>
</view>

  • index.js

    javascript 复制代码 
    loadMeetingInfos(){
    let that=this;
    wx.request({
        url: api.MettingInfos,
        dataType: 'json',
        success(res) {
          console.log(res)
          that.setData({
              lists:res.data.lists
          })
        }
      })
  }

  • index.wxss

    javascript 复制代码 
    .mobi-title {
    font-size: 12pt;
    color: #777;
    line-height: 110%;
    font-weight: bold;
    width: 100%;
    padding: 15rpx;
    background-color: #f3f3f3;
}

.mobi-icon {
    padding: 0rpx 3rpx;
    border-radius: 3rpx;
    background-color: #ff7777;
    position: relative;
    margin-right: 10rpx;
}

/*list*/
.list {
    display: flex;
    flex-direction: row;
    width: 100%;
    padding: 0 20rpx 0 0;
    border-top: 1px solid #eeeeee;
    background-color: #fff;
    margin-bottom: 5rpx;
    /* border-radius: 20rpx;
    box-shadow: 0px 0px 10px 6px rgba(0,0,0,0.1); */
}

.list-img {
    display: flex;
    margin: 10rpx 10rpx;
    width: 150rpx;
    height: 220rpx;
    justify-content: center;
    align-items: center;
}

.list-img .video-img {
    width: 120rpx;
    height: 120rpx;
    
}

.list-detail {
    margin: 10rpx 10rpx;
    display: flex;
    flex-direction: column;
    width: 600rpx;
    height: 220rpx;
}

.list-title text {
    font-size: 11pt;
    color: #333;
    font-weight: bold;
}

.list-detail .list-tag {
    display: flex;
    height: 70rpx;
}

.list-tag .state {
    font-size: 9pt;
    color: #81aaf7;
    width: 120rpx;
    border: 1px solid #93b9ff;
    border-radius: 2px;
    margin: 10rpx 0rpx;
    display: flex;
    justify-content: center;
    align-items: center;
}

.list-tag .join {
    font-size: 11pt;
    color: #bbb;
    margin-left: 20rpx;
    display: flex;
    justify-content: center;
    align-items: center;
}

.list-tag .list-num {
    font-size: 11pt;
    color: #ff6666;
}

.list-info {
    font-size: 9pt;
    color: #bbb;
    margin-top: 20rpx;
}
.bottom-line{
    display: flex;
    height: 60rpx;
    justify-content: center;
    align-items: center;
    background-color: #f3f3f3;
}
.bottom-line text{
    font-size: 9pt;
    color: #666;
}

会议OA项目-会议

自定义tabs组件

文档参考地址：自定义组件 | 微信开放文档

tabs.json

javascript 复制代码 
{
  "component": true,
  "usingComponents": {}
}

tabs.wxml

javascript 复制代码 
<view class="tabs">
    <view class="tabs_title">
        <view wx:for="{{tabList}}" wx:key="id" class="title_item  {{index==tabIndex?'item_active':''}}" bindtap="handleItemTap" data-index="{{index}}">
            <view style="margin-bottom:5rpx">{{item}}</view>
            <view style="width:30px" class="{{index==tabIndex?'item_active1':''}}"></view>
        </view>
    </view>
    <view class="tabs_content">
        <slot></slot>
    </view>
</view>

tabs.wxss

css 复制代码 
.tabs {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #fff;
    z-index: 99;
    border-bottom: 1px solid #efefef;
    padding-bottom: 20rpx;
}

.tabs_title {
    /* width: 400rpx; */
    width: 90%;
    display: flex;
    font-size: 9pt;
    padding: 0 20rpx;
}

.title_item {
    color: #999;
    padding: 15rpx 0;
    display: flex;
    flex: 1;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
}

.item_active {
    /* color:#ED8137; */
    color: #000000;
    font-size: 11pt;
    font-weight: 800;
}

.item_active1 {
    /* color:#ED8137; */
    color: #000000;
    font-size: 11pt;
    font-weight: 800;
    border-bottom: 6rpx solid #333;
    border-radius: 2px;
}

tabs.js

javascript 复制代码 
var App = getApp();
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    tabList:Object
  },

  /**
   * 组件的初始数据
   */
  data: {
    tabIndex:0
  },

  /**
   * 组件的方法列表
   */
  methods: {
    handleItemTap(e){
      // 获取索引
      const {index} = e.currentTarget.dataset;
      // 触发 父组件的事件
      this.triggerEvent("tabsItemChange",{index})
      this.setData({
          tabIndex:index
      })
    }
  }
})

会议管理

list.json

javascript 复制代码 
{
    "usingComponents": {
      "tabs":"/components/tabs/tabs"
    }
}

list.wxml

javascript 复制代码 
<tabs tabList="{{tabs}}"  bindtabsItemChange="tabsItemChange">
</tabs>
<view style="height: 100rpx;"></view>
<block wx:for-items="{{lists}}" wx:for-item="item" wx:key="item.id">
    <view class="list" data-id="{{item.id}}">
        <view class="list-img al-center">
            <image class="video-img" mode="scaleToFill" src="{{item.image}}"></image>
        </view>
        <view class="list-detail">
            <view class="list-title"><text>{{item.title}}</text></view>
            <view class="list-tag">
                <view class="state al-center">{{item.state}}</view>
                <view class="join al-center"><text class="list-num">{{item.num}}</text>人报名</view>
            </view>
            <view class="list-info"><text>{{item.address}}</text>|<text>{{item.time}}</text></view>
        </view>
    </view>
</block>

list.wxss

javascript 复制代码 
.mobi-title {
    font-size: 12pt;
    color: #777;
    line-height: 110%;
    font-weight: bold;
    width: 100%;
    padding: 15rpx;
    background-color: #f3f3f3;
}

.mobi-icon {
    padding: 0rpx 3rpx;
    border-radius: 3rpx;
    background-color: #ff7777;
    position: relative;
    margin-right: 10rpx;
}

/*list*/
.list {
    display: flex;
    flex-direction: row;
    width: 100%;
    padding: 0 20rpx 0 0;
    border-top: 1px solid #eeeeee;
    background-color: #fff;
    margin-bottom: 5rpx;
    /* border-radius: 20rpx;
    box-shadow: 0px 0px 10px 6px rgba(0,0,0,0.1); */
}

.list-img {
    display: flex;
    margin: 10rpx 10rpx;
    width: 150rpx;
    height: 220rpx;
    justify-content: center;
    align-items: center;
}

.list-img .video-img {
    width: 120rpx;
    height: 120rpx;
    
}

.list-detail {
    margin: 10rpx 10rpx;
    display: flex;
    flex-direction: column;
    width: 600rpx;
    height: 220rpx;
}

.list-title text {
    font-size: 11pt;
    color: #333;
    font-weight: bold;
}

.list-detail .list-tag {
    display: flex;
    height: 70rpx;
}

.list-tag .state {
    font-size: 9pt;
    color: #81aaf7;
    width: 120rpx;
    border: 1px solid #93b9ff;
    border-radius: 2px;
    margin: 10rpx 0rpx;
    display: flex;
    justify-content: center;
    align-items: center;
}

.list-tag .join {
    font-size: 11pt;
    color: #bbb;
    margin-left: 20rpx;
    display: flex;
    justify-content: center;
    align-items: center;
}

.list-tag .list-num {
    font-size: 11pt;
    color: #ff6666;
}

.list-info {
    font-size: 9pt;
    color: #bbb;
    margin-top: 20rpx;
}
.bottom-line{
    display: flex;
    height: 60rpx;
    justify-content: center;
    align-items: center;
    background-color: #f3f3f3;
}
.bottom-line text{
    font-size: 9pt;
    color: #666;
}

list.js

javascript 复制代码 
// pages/meeting/list/list.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
      tabs:['会议中','已完成','已取消','全部会议'],
      lists: [
        {
          'id': '1',
          'image': '/static/persons/Snipaste_2024-02-18_20-39-17.png',
          'title': '微信小程序会议OA_空空',
          'num':'1314',
          'state':'进行中',
          'time': '02月18日 21:00',
          'address': '湖南省------长沙市'
        },
        {
          'id': '1',
          'image': '/static/persons/Snipaste_2024-02-18_20-40-00.png',
          'title': '微信小程序会议OA_空空',
          'num':'520',
          'state':'已结束',
          'time': '02月18日 21:00',
          'address': '湖南省------长沙市'
        },
        {
          'id': '1',
          'image': '/static/persons/Snipaste_2024-02-18_20-40-45.png',
          'title': '微信小程序会议OA_空空',
          'num':'666',
          'state':'进行中',
          'time': '02月18日 21:00',
          'address': '湖南省------长沙市'
        },
        {
          'id': '1',
          'image': '/static/persons/Snipaste_2024-02-18_20-40-45.png',
          'title': '微信小程序会议OA_空空',
          'num':'888',
          'state':'已结束',
          'time': '02月18日 21:00',
          'address': '湖南省------长沙市'
        },
        {
          'id': '1',
          'image': '/static/persons/Snipaste_2024-02-18_20-39-17.png',
          'title': '微信小程序会议OA_空空',
          'num':'217',
          'state':'进行中',
          'time': '10月09日 16:59',
          'address': '北京市·朝阳区'
        }
      ],
      lists1: [
        {
          'id': '1',
          'image': '/static/persons/Snipaste_2024-02-18_20-39-17.png',
          'title': '微信小程序会议OA_空空',
          'num':'304',
          'state':'进行中',
          'time': '10月09日 17:59',
          'address': '深圳市·南山区'
        },
        {
          'id': '1',
          'image': '/static/persons/Snipaste_2024-02-18_20-39-17.png',
          'title': '微信小程序会议OA_空空',
          'num':'380',
          'state':'已结束',
          'time': '10月09日 17:39',
          'address': '北京市·朝阳区'
        },
        {
          'id': '1',
          'image': '/static/persons/Snipaste_2024-02-18_20-39-17.png',
          'title': '微信小程序会议OA_空空',
          'num':'500',
          'state':'进行中',
          'time': '10月09日 17:31',
          'address': '大连市'
        }
      ],
      lists2: [
        {
          'id': '1',
          'image': '/static/persons/Snipaste_2024-02-18_20-39-17.png',
          'title': '微信小程序会议OA_空空',
          'num':'304',
          'state':'进行中',
          'time': '10月09日 17:59',
          'address': '深圳市·南山区'
        },
        {
          'id': '1',
          'image': '/static/persons/Snipaste_2024-02-18_20-39-17.png',
          'title': '微信小程序会议OA_空空',
          'num':'380',
          'state':'已结束',
          'time': '10月09日 17:39',
          'address': '北京市·朝阳区'
        }
      ],
      lists3: [
        {
          'id': '1',
          'image': '/static/persons/Snipaste_2024-02-18_20-39-17.png',
          'title': '微信小程序会议OA_空空',
          'num':'304',
          'state':'进行中',
          'time': '10月09日 17:59',
          'address': '深圳市·南山区'
        },
        {
          'id': '1',
          'image': '/static/persons/Snipaste_2024-02-18_20-39-17.png',
          'title': '微信小程序会议OA_空空',
          'num':'380',
          'state':'已结束',
          'time': '10月09日 17:39',
          'address': '北京市·朝阳区'
        },
        {
          'id': '1',
          'image': '/static/persons/Snipaste_2024-02-18_20-39-17.png',
          'title': '微信小程序会议OA_空空',
          'num':'500',
          'state':'进行中',
          'time': '10月09日 17:31',
          'address': '大连市'
        },
        {
          'id': '1',
          'image': '/static/persons/Snipaste_2024-02-18_20-39-17.png',
          'title': '微信小程序会议OA_空空',
          'num':'150',
          'state':'已结束',
          'time': '10月09日 17:21',
          'address': '北京市·朝阳区'
        },
        {
          'id': '1',
          'image': '/static/persons/Snipaste_2024-02-18_20-39-17.png',
          'title': '微信小程序会议OA_空空',
          'num':'217',
          'state':'进行中',
          'time': '10月09日 16:59',
          'address': '北京市·朝阳区'
        }
      ]
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {

    },


    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {

    },

    tabsItemChange(e){
        let tolists;
        if(e.detail.index==1){
            tolists = this.data.lists1;
        }else if(e.detail.index==2){
            tolists = this.data.lists2;
        }else{
            tolists = this.data.lists3;
        }
        this.setData({
            lists: tolists
        })
    }
})

会议OA项目-投票

list.js

javascript 复制代码 
// pages/vote/list/list.js
var app = getApp();
Page({

    /**
     * 页面的初始数据
     */
    data: {
        tabs:['全部','发起的','参与的'],
        voteList:[
            {
                id:1,
                title:'微信小程序会议OA_空空',
                votes:[
                    {
                        id:1,
                        img:'/static/persons/Snipaste_2024-02-18_20-40-00.png',
                        title:'A',
                        mem:'A'
                    },
                    {
                        id:2,
                        img:'/static/persons/Snipaste_2024-02-18_20-40-45.png',
                        title:'B',
                        mem:'B'
                    }
                ]
            },
            {
                id:1,
                title:'微信小程序会议OA_空空',
                votes:[
                    {
                        id:1,
                        img:'/static/persons/Snipaste_2024-02-18_20-40-00.png',
                        title:'B',
                        mem:'B'
                    },
                    {
                        id:2,
                        img:'/static/persons/Snipaste_2024-02-18_20-40-45.png',
                        title:'C',
                        mem:'C'
                    },
                    {
                        id:3,
                        img:'/static/persons/Snipaste_2024-02-18_20-40-45.png',
                        title:'D',
                        mem:'X'
                    },
                    {
                        id:4,
                        img:'/static/persons/Snipaste_2024-02-18_20-39-17.png',
                        title:'F',
                        mem:'T'
                    }
                ]
            }
        ]
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {

    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    },
    tabsItemChange(e){
        let index = e.detail.index;
        console.log('vote.index='+index)
        if(index==1 || index==2){
            if (app.globalData.hasLogin) {
                
            }else{
                wx.navigateTo({
                  url: '/pages/auth/login/login',
                })
            }
        }
    }
})

会议OA项目-个人中心

index.wxml

XML 复制代码 
<view class="page-container">
    <view class="user-info-container">
        <view class="user-info"  bindtap="goLogin">
            <image class="user-img" mode="scaleToFill" src="{{userInfo.avatarUrl}}" />
            <text class="user-info-name">{{userInfo.nickName}}</text>
        </view>
        <image class="user-update" src="/static/tabBar/component.png" bindtap='goPages' data-url='/pages/ucenter/user/user'/>
    </view>

    <view class="boundary" />
    <view class="cells-container">
        <view class="cell-wrap">
            <image class="cell-icon" src="/static/tabBar/sdk.png" />
            <text class="cell-text">我主持的会议</text>
            <view class="cell-right">
                <view class="cell-list-num">{{metting_pubs}}</view>
                <view class="cell-arrow"></view>
            </view>
        </view>
        <view class="cell-wrap">
            <image class="cell-icon" src="/static/tabBar/sdk.png" />
            <text class="cell-text">我参与的会议</text>
            <view class="cell-right">
                <view class="cell-list-num">{{metting_joins}}</view>
                <view class="cell-arrow"></view>
            </view>
        </view>
    </view>
    <view class="boundary" />
    <view class="cells-container">
        <view class="cell-wrap">
            <image class="cell-icon" src="/static/tabBar/sdk.png" />
            <text class="cell-text">我发布的投票</text>
            <view class="cell-right">
                <view class="cell-list-num">1</view>
                <view class="cell-arrow"></view>
            </view>
        </view>
        <view class="cell-wrap">
            <image class="cell-icon" src="/static/tabBar/sdk.png" />
            <text class="cell-text">我参与的投票</text>
            <view class="cell-right">
                <view class="cell-list-num">10</view>
                <view class="cell-arrow"></view>
            </view>
        </view>
    </view>
    <view class="boundary" />
    <view class="cells-container">
        <view class="cell-wrap">
            <image class="cell-icon" src="/static/tabBar/template.png" />
            <text class="cell-text">消息</text>
            <view class="cell-right">
                <view class="cell-list-num"></view>
                <view class="cell-arrow"></view>
            </view>
        </view>
        <view class="cell-wrap">
            <image class="cell-icon" src="/static/tabBar/component.png" />
            <text class="cell-text">设置</text>
            <view class="cell-right">
                <view class="cell-list-num"></view>
                <view class="cell-arrow"></view>
            </view>
        </view>
    </view>
</view>

箭头样式：

XML 复制代码 
.cell-arrow {
  width: 7px;
  height: 7px;
  border-width: 1px;
  border-color: rgb(136, 136, 136);
  border-style: none solid solid none;
  transform: rotate(315deg);
}
相关推荐
尚梦3 小时前
uni-app 封装刘海状态栏（适用小程序， h5, 头条小程序）
前端·小程序·uni-app
小飞哥liac5 小时前
微信小程序的组件
微信小程序
stormjun7 小时前
Java基于微信小程序的私家车位共享系统(附源码，文档）
java·微信小程序·共享停车位·私家车共享停车位小程序·停车位共享
paopaokaka_luck7 小时前
基于Spring Boot+Vue的助农销售平台(协同过滤算法、限流算法、支付宝沙盒支付、实时聊天、图形化分析)
java·spring boot·小程序·毕业设计·mybatis·1024程序员节
Bessie2349 小时前
微信小程序eval无法使用的替代方案
微信小程序·小程序·uni-app
shenweihong9 小时前
javascript实现md5算法(支持微信小程序)，可分多次计算
javascript·算法·微信小程序
蜕变菜鸟9 小时前
小程序跳转另一个小程序
小程序
待13 小时前
躺平成长-代码开发，利用kimi开发小程序（09）
小程序
待16 小时前
微信小程序运营日记（第四天）
微信小程序·小程序
guanpinkeji16 小时前
旧衣回收小程序：提高回收效率，扩大服务范围
大数据·小程序·团队开发·软件开发·小程序开发·旧衣回收·旧衣回收小程序
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10红米手机使用google play