我的远程实习笔记day7---表白墙（发布按钮）-CSDN博客

本文链接：https://blog.csdn.net/wendyzhouwendy/article/details/129376159

今天是在第二大学远程实习的第七天，偷偷发个博客记录一下自己的成长哈哈（今天学习表白墙项目）
biaobaiqiang.wxml:

<!-- 通过一个view将整个页面包裹起来，并设置了一个背景图片 注释:class是指向wxss文件中我们设定的央视信息的-->
<view class="Beijingse" style="height: 100%;">

  <view class="Xinxi">
    <!-- 渲染信息列表 ,这里的wx:for和item在课时3的半成品主页源码注释中有解释-->
    <view class="XinxiLiebiao" wx:for="{{yonghuxinxi}}" wx:key="id">
    <!-- 取得id的值，并设置点击事件通过js文件中的QuXiangqing（去详情）标识出来的owx.navigateT跳转到详情页-->
        <view data-id="{{item.id}}" bindtap="QuXiangqing">
            <view class="liebiaowenben">
            <!-- 打印出上传用户的信息 -->
                <view class="EwaiXinxiBiankuang"><text class="EwaiXinxi">上传用户:{{item.username}}</text></view>
            </view>
            <!-- 打印出内容 -->
              <view class="NeirongBiankuang"><text class="neirong">{{item.neirong}}</text></view>
              <!-- 判断是否有图片二,如果没有则显示所包含的内容 -->
            <view class="XinxiTupianBiankuang" wx:if="{{item.tupian1!=''&&item.tupian2==''}}">
                <view class="XinxiTupianBiankuang1-1" wx:if="{{item.tupian1!=''}}">
                <!-- 打印出图片一,mode设置的是图片的显示格式,详情参考:https://developers.weixin.qq.com/miniprogram/dev/component/image.html中的mode属性说明 -->
                    <image src="https://xx.uom.cn/new/img/wx7c24e1e2e2875b2e/{{item.tupian1}}" class="XinxiTupian1" mode="aspectFill" wx:if="{{item.tupian1!=''}}"></image> 
                </view>
            </view>  
            <!-- 判断是否有图片二如果有,则显示包含的内容 -->
            <view class="XinxiTupianBiankuang2" wx:if="{{item.tupian2!=''}}">
            <!-- 打印出图片一和图片二 -->
                <image src="https://xx.uom.cn/new/img/wx7c24e1e2e2875b2e/{{item.tupian1}}" class="XinxiTupian2" mode="aspectFit"></image> 
                <image src="https://xx.uom.cn/new/img/wx7c24e1e2e2875b2e/{{item.tupian2}}" class="XinxiTupian2" mode="aspectFit"></image> 
            </view>
        </view> 
    </view>
  </view>
  <!-- 右下角的发布按钮 bindtap属性设置了点击事件,通过js中的Qufabu指示出的代码段跳转到发布页,关于跳转详情请参考:https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab.html,有几种不同的跳转方式,我们用的最多的就是wx.navigateTo-->
  <view class="guding"  bindtap="QuFabu">
  	<text class="wenben">发布\n信息</text>
  </view>
</view>

biaobaiqiang.js：

//   跳转到发布页
  QuFabu:function(){
    wx.navigateTo({
      url: '/pages/fabu/fabu',//发布页的地址
    })
  },

biaobaiqiang.wxss：

/* 用于固定发布按钮 */
  .guding{
	position: fixed;
	right: 20rpx;
	bottom: 20rpx;
	width: 150rpx;
	height: 150rpx;
	display:flex;
	flex-wrap:wrap;
	flex-direction: column;
	align-items: center;
	border-radius: 90rpx;
	line-height: 40rpx;
	background-image: url('https://xx.uom.cn/new/img/wx7c24e1e2e2875b2e/1662456589.png');/*发布按钮的爱心图片,注意,背景图最好是一个网络图片的地址,如果添加的是图片地址将会出现错误*/
  }


/* 设置发布按钮文本 */
  .wenben{
	  margin: 38rpx;
	width: 80rpx;
	height: 80rpx;
  }