首页 > 小程序教程 > 微信小程序淘宝对话意见页面样式模板制作设计下载

微信小程序淘宝对话意见页面样式模板制作设计下载

上一篇 下一篇
制作好以后效果图如下:
一、wxml页面代码如下:
<view class="feedback-page">
    <view>
        <view>
            <view id="feedback">
                <view class="feedback-cell feedback-cell-system">
                    <image ng-src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAIAAAAlC+aJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAHV8AAB1fAThpIDAAAACxSURBVGhD7dKxDcAgFMTQkP1HTUE2iJjhFdGXTO8T2Kxnv9fkc0++/Ll7D/i7YAUqgAb6QiiQ8QqwQhyoAApkvAKsEAcqgAIZrwArxIEKoEDGK8AKcaACKJDxCrBCHKgACmS8AqwQByqAAhmvACvEgQqgQMYrwApxoAIokPEKsEIcqAAKZLwCrBAHKoACGa8AK8SBCqBAxivACnGgAiiQ8QqwQhyoAApkvAKsEAfGF/gAZn4DTUiZc3IAAAAASUVORK5CYII=" alt="" class="avatar" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAIAAAAlC+aJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAHV8AAB1fAThpIDAAAACxSURBVGhD7dKxDcAgFMTQkP1HTUE2iJjhFdGXTO8T2Kxnv9fkc0++/Ll7D/i7YAUqgAb6QiiQ8QqwQhyoAApkvAKsEAcqgAIZrwArxIEKoEDGK8AKcaACKJDxCrBCHKgACmS8AqwQByqAAhmvACvEgQqgQMYrwApxoAIokPEKsEIcqAAKZLwCrBAHKoACGa8AK8SBCqBAxivACnGgAiiQ8QqwQhyoAApkvAKsEAfGF/gAZn4DTUiZc3IAAAAASUVORK5CYII="></image>
                    <view class="bubble">你好,有什么需要帮助?<span class="wedge"></span></view>
                </view>
                <view class="feedback-cell feedback-cell-user">
                    <image ng-src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAIAAAAlC+aJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAHV8AAB1fAThpIDAAAACxSURBVGhD7dKxDcAgFMTQkP1HTUE2iJjhFdGXTO8T2Kxnv9fkc0++/Ll7D/i7YAUqgAb6QiiQ8QqwQhyoAApkvAKsEAcqgAIZrwArxIEKoEDGK8AKcaACKJDxCrBCHKgACmS8AqwQByqAAhmvACvEgQqgQMYrwApxoAIokPEKsEIcqAAKZLwCrBAHKoACGa8AK8SBCqBAxivACnGgAiiQ8QqwQhyoAApkvAKsEAfGF/gAZn4DTUiZc3IAAAAASUVORK5CYII=" alt="" class="avatar" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAIAAAAlC+aJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAHV8AAB1fAThpIDAAAACxSURBVGhD7dKxDcAgFMTQkP1HTUE2iJjhFdGXTO8T2Kxnv9fkc0++/Ll7D/i7YAUqgAb6QiiQ8QqwQhyoAApkvAKsEAcqgAIZrwArxIEKoEDGK8AKcaACKJDxCrBCHKgACmS8AqwQByqAAhmvACvEgQqgQMYrwApxoAIokPEKsEIcqAAKZLwCrBAHKoACGa8AK8SBCqBAxivACnGgAiiQ8QqwQhyoAApkvAKsEAfGF/gAZn4DTUiZc3IAAAAASUVORK5CYII="></image>
                    <view class="bubble">你们是不是只是从淘宝收集好吃的零食,不能直接购买的,如果需要购买会跳到淘宝去购买是吗?<span class="wedge"></span></view>
                </view>
                <view class="feedback-cell feedback-cell-system">
                    <image ng-src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAIAAAAlC+aJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAHV8AAB1fAThpIDAAAACxSURBVGhD7dKxDcAgFMTQkP1HTUE2iJjhFdGXTO8T2Kxnv9fkc0++/Ll7D/i7YAUqgAb6QiiQ8QqwQhyoAApkvAKsEAcqgAIZrwArxIEKoEDGK8AKcaACKJDxCrBCHKgACmS8AqwQByqAAhmvACvEgQqgQMYrwApxoAIokPEKsEIcqAAKZLwCrBAHKoACGa8AK8SBCqBAxivACnGgAiiQ8QqwQhyoAApkvAKsEAfGF/gAZn4DTUiZc3IAAAAASUVORK5CYII=" alt="" class="avatar" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAIAAAAlC+aJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAHV8AAB1fAThpIDAAAACxSURBVGhD7dKxDcAgFMTQkP1HTUE2iJjhFdGXTO8T2Kxnv9fkc0++/Ll7D/i7YAUqgAb6QiiQ8QqwQhyoAApkvAKsEAcqgAIZrwArxIEKoEDGK8AKcaACKJDxCrBCHKgACmS8AqwQByqAAhmvACvEgQqgQMYrwApxoAIokPEKsEIcqAAKZLwCrBAHKoACGa8AK8SBCqBAxivACnGgAiiQ8QqwQhyoAApkvAKsEAfGF/gAZn4DTUiZc3IAAAAASUVORK5CYII="></image>
                    <view class="bubble">是的,我们每天会从淘宝挑选好吃的<span class="wedge"></span></view>
                </view>
                <view class="feedback-cell feedback-cell-user">
                    <image ng-src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAIAAAAlC+aJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAHV8AAB1fAThpIDAAAACxSURBVGhD7dKxDcAgFMTQkP1HTUE2iJjhFdGXTO8T2Kxnv9fkc0++/Ll7D/i7YAUqgAb6QiiQ8QqwQhyoAApkvAKsEAcqgAIZrwArxIEKoEDGK8AKcaACKJDxCrBCHKgACmS8AqwQByqAAhmvACvEgQqgQMYrwApxoAIokPEKsEIcqAAKZLwCrBAHKoACGa8AK8SBCqBAxivACnGgAiiQ8QqwQhyoAApkvAKsEAfGF/gAZn4DTUiZc3IAAAAASUVORK5CYII=" alt="" class="avatar" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAIAAAAlC+aJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAHV8AAB1fAThpIDAAAACxSURBVGhD7dKxDcAgFMTQkP1HTUE2iJjhFdGXTO8T2Kxnv9fkc0++/Ll7D/i7YAUqgAb6QiiQ8QqwQhyoAApkvAKsEAcqgAIZrwArxIEKoEDGK8AKcaACKJDxCrBCHKgACmS8AqwQByqAAhmvACvEgQqgQMYrwApxoAIokPEKsEIcqAAKZLwCrBAHKoACGa8AK8SBCqBAxivACnGgAiiQ8QqwQhyoAApkvAKsEAfGF/gAZn4DTUiZc3IAAAAASUVORK5CYII="></image>
                    <view class="bubble">怎么注册成为会员?<span class="wedge"></span></view>
                </view>
                <view class="feedback-cell feedback-cell-system">
                    <image ng-src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAIAAAAlC+aJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAHV8AAB1fAThpIDAAAACxSURBVGhD7dKxDcAgFMTQkP1HTUE2iJjhFdGXTO8T2Kxnv9fkc0++/Ll7D/i7YAUqgAb6QiiQ8QqwQhyoAApkvAKsEAcqgAIZrwArxIEKoEDGK8AKcaACKJDxCrBCHKgACmS8AqwQByqAAhmvACvEgQqgQMYrwApxoAIokPEKsEIcqAAKZLwCrBAHKoACGa8AK8SBCqBAxivACnGgAiiQ8QqwQhyoAApkvAKsEAfGF/gAZn4DTUiZc3IAAAAASUVORK5CYII=" alt="" class="avatar" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAIAAAAlC+aJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAHV8AAB1fAThpIDAAAACxSURBVGhD7dKxDcAgFMTQkP1HTUE2iJjhFdGXTO8T2Kxnv9fkc0++/Ll7D/i7YAUqgAb6QiiQ8QqwQhyoAApkvAKsEAcqgAIZrwArxIEKoEDGK8AKcaACKJDxCrBCHKgACmS8AqwQByqAAhmvACvEgQqgQMYrwApxoAIokPEKsEIcqAAKZLwCrBAHKoACGa8AK8SBCqBAxivACnGgAiiQ8QqwQhyoAApkvAKsEAfGF/gAZn4DTUiZc3IAAAAASUVORK5CYII="></image>
                    <view class="bubble">我们现在仅支付第三方登录,如QQ登录,微博和微信登录,还不能直接注册。<span class="wedge"></span></view>
                </view>
                <view class="feedback-cell feedback-cell-user">
                    <image ng-src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAIAAAAlC+aJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAHV8AAB1fAThpIDAAAACxSURBVGhD7dKxDcAgFMTQkP1HTUE2iJjhFdGXTO8T2Kxnv9fkc0++/Ll7D/i7YAUqgAb6QiiQ8QqwQhyoAApkvAKsEAcqgAIZrwArxIEKoEDGK8AKcaACKJDxCrBCHKgACmS8AqwQByqAAhmvACvEgQqgQMYrwApxoAIokPEKsEIcqAAKZLwCrBAHKoACGa8AK8SBCqBAxivACnGgAiiQ8QqwQhyoAApkvAKsEAfGF/gAZn4DTUiZc3IAAAAASUVORK5CYII=" alt="" class="avatar" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAIAAAAlC+aJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAHV8AAB1fAThpIDAAAACxSURBVGhD7dKxDcAgFMTQkP1HTUE2iJjhFdGXTO8T2Kxnv9fkc0++/Ll7D/i7YAUqgAb6QiiQ8QqwQhyoAApkvAKsEAcqgAIZrwArxIEKoEDGK8AKcaACKJDxCrBCHKgACmS8AqwQByqAAhmvACvEgQqgQMYrwApxoAIokPEKsEIcqAAKZLwCrBAHKoACGa8AK8SBCqBAxivACnGgAiiQ8QqwQhyoAApkvAKsEAfGF/gAZn4DTUiZc3IAAAAASUVORK5CYII="></image>
                    <view class="bubble">好的,谢谢哈~~~~<span class="wedge"></span></view>
                </view>
                <view class="reply-box">
                    <input type="text" placeholder="向果果说出您的意见" />
                    <button class="send">发送</button>
                </view>
            </view>
        </view>
    </view>
</view>
 
二、wxss样式文件代码如下:
page {
	background-color: #fff;
}
#feedback {
    margin-bottom: 88rpx;
}
#feedback .feedback-cell {
    overflow: hidden;
    margin: 40rpx;
}
#feedback .feedback-cell .avatar {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    vertical-align: top;
}
.avatar {
    height: 136rpx;
    line-height: 136rpx;
    font-size: 28rpx;
    border-top: 1px solid #eeeff0;
    clear: both;
}
#feedback .feedback-cell.feedback-cell-system .bubble {
    background-color: #fee0e5;
    border: 1px solid #fec0c9;
    margin: 0 20rpx;
    display: inline-block;
}
#feedback .feedback-cell .bubble {
    padding: 20rpx;
    border-radius: 12rpx;
    color: #333333;
    font-size: 28rpx;
    line-height: 32rpx;
    max-width: 440rpx;
    position: relative;
}
#feedback .feedback-cell.feedback-cell-system .bubble .wedge {
    background-color: #fee0e5;
    border: 1px solid #fec0c9;
    border-width: 0 0 1px 1px;
    left: -10rpx;
    top: 26rpx;
}
#feedback .feedback-cell .bubble .wedge {
    display: block;
    position: absolute;
    width: 20rpx;
    height: 20rpx;
    border-radius: 4rpx;
    transform: rotate(45deg);
}
#feedback .reply-box {
    width: 100%;
    height: 96rpx;
    background: #efefef;
    position: fixed;
    bottom: 0;
    border-top: 1px solid #d6d6d6;
}
#feedback .reply-box input {
	display: inline-block;
    margin: 12rpx 12rpx;
    margin-right: 0;
    height: 72rpx;
    width: 560rpx;
    border-radius: 10rpx;
    border: 1px solid #d6d6d6;
    outline: none;
    padding: 0 20rpx;
    font-size: 24rpx;
    background-color: #fff;
}
#feedback .reply-box button.send {
    width: 96rpx;
    height: 96rpx;
    float: right;
    display: inline-block;
    padding: 10rpx 40rpx 0 0;
    background: none;
    font-size: 28rpx;
    color: #353535;
}
#feedback .reply-box button.send:after{
	border: none;
}
#feedback .feedback-cell.feedback-cell-user .avatar {
    float: right;
}
#feedback .feedback-cell .avatar {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    vertical-align: top;
}
#feedback .feedback-cell.feedback-cell-user .bubble {
    background-color: #eee;
    border: 1px solid #ddd;
    margin: 0 20rpx;
    display: inline-block;
    float: right;
}
#feedback .feedback-cell .bubble {
    padding: 20rpx;
    border-radius: 12rpx;
    color: #333;
    font-size: 28rpx;
    line-height: 32rpx;
    max-width: 440rpx;
    position: relative;
}
#feedback .feedback-cell.feedback-cell-user .bubble .wedge {
    background-color: #eee;
    border: 1px solid #ddd;
    border-width: 1px 1px 0 0;
    right: -10rpx;
    top: 26rpx;
}
#feedback .feedback-cell .bubble .wedge {
    display: block;
    position: absolute;
    width: 20rpx;
    height: 20rpx;
    border-radius: 4rpx;
    transform: rotate(45deg);
}
三、js页面代码如下:
Page({
  data:{
    // text:"这是一个页面"
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
    console.log(options)
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

模板简介:该模板名称为【微信小程序淘宝对话意见页面样式模板制作设计下载】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 21,761次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 06-20
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
微信图片 html5 自适应 微信文章 响应式 微信公众平台 单页式简历模板 微信模板 企业网站 微信素材
您可能会喜欢的其他模板